如何实现点击按钮显示/隐藏视频与文本？附HTML/CSS代码

我来帮你搞定这个交互需求！你的目标是点击按钮时显示视频和文本，再次点击按钮或者点击页面其他区域就隐藏它们对吧？咱们先梳理下现有代码的小问题，再给出完整的解决方案：

现有代码的问题点 #

• CSS选择器错误：abl1 video 应该是 #abl1 video（因为abl1是ID选择器，需要加#前缀）
• z-index值格式错误：.ability1txt里的z-index: 10px要改成z-index: 10（z-index是无单位的数值）
• 按钮容器类名不合法：button.abl 中的点会被识别为类名分隔符，应该改成button-abl这类合法类名
• 初始状态未隐藏内容：页面加载时应该默认隐藏视频和文本，点击按钮再触发显示

完整解决方案代码 #

HTML 代码 #

<div id="abl1" class="content-container"> 
  <!-- Ability ONE VIDEO HEAL SHOT !--> 
  <video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video> 
</div> 
<div class="shape1"></div> 
<p class="ability1txt content-container">Text.</p> 
<div class="button-abl"> 
  <button id="abl1-btn" class="ability1">显示/隐藏内容</button> 
</div>

CSS 代码 #

/* 初始隐藏视频和文本容器 */
.content-container {
  display: none;
}

#abl1 video{ 
  height: 500px; 
  width: 600px; 
  z-index: 1; 
  position: absolute; 
  margin-top: 50px; 
  margin-left: 200px; 
} 

.ability1txt{ 
  position: absolute; 
  text-align: center; 
  width: 600px; 
  font-size: 27px; 
  z-index: 10; 
  margin-left: 55%; 
  margin-top:8%; 
  font-family: "BigNoodleTitling"; 
  color: white; 
}

/* 给按钮添加基础样式，方便识别和点击 */
.ability1 {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

JavaScript 代码 #

// 获取核心元素
const toggleBtn = document.getElementById('abl1-btn');
const contentElements = document.querySelectorAll('.content-container');

// 按钮点击事件：切换内容的显示/隐藏状态
toggleBtn.addEventListener('click', function(e) {
  // 阻止事件冒泡，避免触发页面其他区域的隐藏逻辑
  e.stopPropagation();
  contentElements.forEach(el => {
    el.style.display = el.style.display === 'block' ? 'none' : 'block';
  });
});

// 页面其他区域点击事件：如果内容处于显示状态则隐藏
document.addEventListener('click', function(e) {
  // 判断点击目标不是按钮本身，且内容当前是显示状态
  if (!toggleBtn.contains(e.target)) {
    contentElements.forEach(el => {
      if (el.style.display === 'block') {
        el.style.display = 'none';
      }
    });
  }
});

代码逻辑说明 #

1. 初始隐藏设置：给视频和文本容器统一添加content-container类，通过CSS设置display: none，让页面加载时内容默认隐藏
2. 按钮交互逻辑：点击按钮时遍历所有内容容器，切换它们的display属性（block显示/none隐藏），同时用e.stopPropagation()阻止事件冒泡，避免触发页面其他区域的隐藏逻辑
3. 全局点击逻辑：监听整个文档的点击事件，当点击目标不是按钮时，检查内容是否处于显示状态，若是则隐藏内容

这样就能完美实现你想要的交互效果啦！

内容的提问来源于stack exchange，提问作者Maxaye