新手求助：如何用两个按钮独立切换两个div的可见性？

第一步：HTML结构 #

给每个按钮加上data-target属性，关联对应div的ID，明确每个按钮的控制目标：

<!-- 音频描述文本控制组 -->
<button class="toggle-btn" data-target="audiodescription-text">切换音频描述</button>
<div id="audiodescription-text" class="toggle-content">这里是音频描述的内容</div>

<!-- 选项面板控制组 -->
<button class="toggle-btn" data-target="options-wrapper">切换选项面板</button>
<div id="options-wrapper" class="toggle-content">这里是选项面板的内容</div>

第二步：CSS样式 #

先设置内容默认隐藏，再定义显示用的类：

/* 默认隐藏需要切换的内容 */
.toggle-content {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

/* 显示内容的类 */
.toggle-content.show {
  display: block;
}

第三步：JavaScript逻辑 #

让每个按钮仅操作自己对应的div，互不干扰：

// 获取所有切换按钮
const toggleButtons = document.querySelectorAll('.toggle-btn');

toggleButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 获取按钮绑定的目标div ID
    const targetId = button.dataset.target;
    const targetDiv = document.getElementById(targetId);
    // 切换显示/隐藏状态
    targetDiv.classList.toggle('show');
  });
});

核心说明 #

• 用data-target属性关联按钮和div，不用写重复的事件处理代码，后续加更多切换组也不用修改JS
• classList.toggle()会自动添加或移除show类，实现一键切换
• 每个按钮的点击事件只作用于自己绑定的div，完全不会影响另一个元素的可见状态

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