求助：实现多Div显示/隐藏及点击最后按钮关闭全部功能

嘿，我完全懂你现在的处境——好不容易搞完了按钮切换Div的逻辑，就差最后这临门一脚：点刚才点过的那个按钮，就能把所有Div都关掉对吧？别慌，我给你整一套简单的实现方案～

核心思路 #

我们只需要记录最后一次点击的按钮对应的目标ID，当用户再次点击同一个按钮时，就触发“关闭所有Div”的操作；如果是点击其他按钮，就正常执行切换显示的逻辑。

完整代码实现 #

首先假设你的Div是按div-1、div-2这样的ID命名的（如果不是，你只要对应修改JS里的选择器就行）：

HTML（你的原有结构，补充Div内容）

<div class="hidden-divs-buttons">
  <a class="show-div btn" target="1">Div 1</a>
  <a class="show-div btn" target="2">Div 2</a>
</div>

<!-- 对应的隐藏Div -->
<div id="div-1" class="hidden-div">这是Div 1的内容</div>
<div id="div-2" class="hidden-div">这是Div 2的内容</div>

CSS（基础隐藏样式，可根据你的需求调整）

.hidden-div {
  display: none;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
}

/* 可选：给活跃按钮加高亮样式，提升用户体验 */
.btn.active {
  background-color: #2196F3;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

JavaScript（核心逻辑）

// 获取所有切换按钮和所有隐藏Div
const toggleButtons = document.querySelectorAll('.show-div');
const allHiddenDivs = document.querySelectorAll('.hidden-div');

// 变量记录当前活跃的按钮目标ID，初始为null
let activeTargetId = null;

// 给每个按钮绑定点击事件
toggleButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 获取当前按钮对应的目标ID
    const currentTarget = this.getAttribute('target');

    // 判断是否点击的是当前活跃的按钮
    if (currentTarget === activeTargetId) {
      // 关闭所有Div：给每个Div加上隐藏类
      allHiddenDivs.forEach(div => div.classList.add('hidden-div'));
      // 移除当前按钮的活跃样式（如果加了的话）
      this.classList.remove('active');
      // 重置活跃状态
      activeTargetId = null;
    } else {
      // 先隐藏所有Div，避免多个Div同时显示
      allHiddenDivs.forEach(div => div.classList.add('hidden-div'));
      // 移除所有按钮的活跃样式
      toggleButtons.forEach(btn => btn.classList.remove('active'));
      
      // 显示当前按钮对应的Div
      document.getElementById(`div-${currentTarget}`).classList.remove('hidden-div');
      // 给当前按钮加上活跃样式
      this.classList.add('active');
      // 更新活跃目标ID
      activeTargetId = currentTarget;
    }
  });
});

逻辑说明 #

1. 状态跟踪：用activeTargetId变量记住最后一次点击的按钮对应的Div ID，这样就能判断用户是不是重复点击了同一个按钮。
2. 分支处理：
   • 重复点击：关闭所有Div，重置活跃状态
   • 点击新按钮：先清空所有显示的Div，再显示目标Div，更新活跃状态
3. 可选优化：给活跃按钮加高亮样式，让用户一眼就能看出当前哪个按钮是激活的，体验更好。

你直接把这段代码替换掉原来的脚本就行，测试一下应该就能实现你想要的效果啦～

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