如何实现独立按钮：点击切换对应弹窗并关闭其他弹窗（Vanilla JS）

原代码存在逻辑错误——在popup.forEach里嵌套了buttons的循环，这会导致每个按钮被绑定与弹窗数量相同次数的点击事件，点击按钮时会重复触发toggle，弹窗状态乱跳，而且完全没处理“关闭其他弹窗”的需求。

正确实现思路 #

• 给每个按钮绑定一次点击事件
• 点击时先找到当前按钮对应的弹窗（可通过索引或自定义属性关联）
• 先隐藏所有非目标弹窗，再切换目标弹窗的显示状态

代码示例 #

方式一：通过索引关联（按钮与弹窗顺序一一对应）

const buttons = document.querySelectorAll("button");
const popups = document.querySelectorAll(".borderBottom");

// 给每个按钮绑定单次点击事件
buttons.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    const currentPopup = popups[index];
    // 关闭所有非当前弹窗
    popups.forEach(popup => {
      if (popup !== currentPopup) {
        popup.classList.remove("show");
      }
    });
    // 切换当前弹窗的显示状态
    currentPopup.classList.toggle("show");
  });
});

方式二：通过自定义属性关联（更灵活，不受顺序限制）

先给HTML里的按钮和弹窗添加对应标识：

<button data-popup-id="popup1">按钮1</button>
<button data-popup-id="popup2">按钮2</button>

<div class="borderBottom" id="popup1">弹窗1</div>
<div class="borderBottom" id="popup2">弹窗2</div>

再写JS逻辑：

const buttons = document.querySelectorAll("button");
const popups = document.querySelectorAll(".borderBottom");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const targetPopupId = btn.dataset.popupId;
    const currentPopup = document.getElementById(targetPopupId);
    
    // 关闭所有其他弹窗
    popups.forEach(popup => {
      if (popup.id !== targetPopupId) {
        popup.classList.remove("show");
      }
    });
    // 切换当前弹窗的显示状态
    currentPopup.classList.toggle("show");
  });
});

代码说明 #

1. 避免重复绑定事件：每个按钮只绑定一次点击逻辑，不会出现多次触发的问题
2. 精准关联弹窗：通过索引或自定义属性确保按钮和弹窗一一对应
3. 先处理其他弹窗：确保点击任意按钮时，其他已打开的弹窗都会被关闭，再切换当前弹窗状态

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