带独立切换功能的多显示/隐藏Div实现问题求助

嘿，我来帮你搞定这个切换Div显示隐藏的问题！你要的是「点击按钮切换对应Div，同时保证同一时间最多只有一个Div显示，再次点击当前按钮还能隐藏」的效果对吧？我给你整理了一套完整可运行的方案，包含HTML、CSS和JavaScript，还有关键逻辑的解释：

1. HTML结构 #

先把按钮和对应的Div关联起来，用data-target属性绑定按钮和目标Div的ID，这样后续JS能轻松找到对应元素：

<!-- 控制按钮组 -->
<button class="toggle-btn" data-target="div1">显示/隐藏Div 1</button>
<button class="toggle-btn" data-target="div2">显示/隐藏Div 2</button>
<button class="toggle-btn" data-target="div3">显示/隐藏Div 3</button>

<!-- 要切换的Div组 -->
<div class="toggle-div" id="div1">这是Div 1的专属内容区域</div>
<div class="toggle-div" id="div2">这是Div 2的专属内容区域</div>
<div class="toggle-div" id="div3">这是Div 3的专属内容区域</div>

2. CSS基础样式 #

默认隐藏所有Div，再给按钮和Div加一点基础样式让页面更规整：

/* 默认隐藏所有目标Div */
.toggle-div {
  display: none;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* 按钮样式（可按需调整） */
.toggle-btn {
  margin-right: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4285f4;
  color: white;
  cursor: pointer;
}

.toggle-btn:hover {
  background-color: #3367d6;
}

3. JavaScript核心逻辑 #

这部分是解决你toggle异常的关键，要同时处理互斥显示和切换状态两个需求：

// 获取所有按钮和目标Div
const toggleBtns = document.querySelectorAll('.toggle-btn');
const toggleDivs = document.querySelectorAll('.toggle-div');

// 给每个按钮绑定点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 拿到当前按钮对应的目标Div
    const targetId = this.getAttribute('data-target');
    const targetDiv = document.getElementById(targetId);
    
    // 判断目标Div当前状态：显示则隐藏，隐藏则先关闭其他再显示
    if (targetDiv.style.display === 'block') {
      targetDiv.style.display = 'none';
    } else {
      // 先隐藏所有其他已显示的Div
      toggleDivs.forEach(div => {
        if (div.id !== targetId) {
          div.style.display = 'none';
        }
      });
      // 显示当前目标Div
      targetDiv.style.display = 'block';
    }
  });
});

关键逻辑说明 #

• 按钮与Div的关联：用data-target属性替代硬编码ID，后续新增按钮和Div时，只需要同步修改这个属性即可，扩展性更强
• 互斥显示处理：当要显示新的Div时，先遍历所有Div，把非目标的都隐藏，保证同一时间只有一个Div处于显示状态
• 切换功能实现：通过判断目标Div的display样式状态，决定是隐藏还是显示，完美实现「点击同一按钮切换状态」的效果

你之前的toggle异常，大概率是没把「互斥显示」和「状态判断」结合起来——比如只处理了显示逻辑，没处理隐藏，或者切换时忘记先关闭其他Div。这个方案可以直接复制运行，你也可以根据自己的需求调整样式和内容~

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