如何用JavaScript/jQuery实现点击按钮切换DIV并关闭其他已打开DIV？

修改思路 #

要实现点击新按钮时自动关闭其他已打开的DIV，核心逻辑是先统一隐藏所有内容容器，再单独处理当前目标DIV的显示状态。

具体修改步骤 #

1. 给所有需要切换显示的DIV添加一个共同类（比如article-container），方便批量操作：

<!-- 示例DIV代码 -->
<div id="Toilet-Repair-Articles" class="hidden article-container">
  <!-- 对应博客内容 -->
</div>
<div id="Sink-Repair-Articles" class="hidden article-container">
  <!-- 对应博客内容 -->
</div>

2. 修改JavaScript的toggle函数，增加批量隐藏逻辑：

<script>
function toggle(e){
    const button = e.target;
    const divId = button.dataset.targetId;
    const targetDiv = document.getElementById(divId);
    // 记录当前目标DIV是否处于显示状态
    const wasShown = !targetDiv.classList.contains("hidden");

    // 遍历所有内容容器，统一设置为隐藏
    const allContentDivs = document.querySelectorAll('.article-container');
    allContentDivs.forEach(div => {
        div.classList.add("hidden");
        div.classList.remove("show");
    });

    // 若目标DIV之前是隐藏状态，则显示它；若之前已显示，则保持隐藏（支持点击同一按钮关闭）
    if(!wasShown){
        targetDiv.classList.remove("hidden");
        targetDiv.classList.add("show");
    }
}
</script>

逻辑说明 #

• 点击按钮时，先批量隐藏所有带article-container类的DIV，确保无其他容器处于显示状态
• 再根据目标DIV的初始状态决定是否显示：初始隐藏则显示，初始显示则保持隐藏（实现同一按钮的切换效果）
• 最终保证同一时间最多只有一个DIV处于显示状态，完全匹配需求

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