如何在原生JavaScript的if条件中定位按钮实现下拉列表互斥关闭

针对你的需求，只需优化按钮点击事件的处理逻辑，并修正window.onclick中的变量错误，就能实现点击除当前按钮外的其他按钮时，自动关闭已展开的下拉列表。具体修改如下：

1. 完善按钮点击函数myFunction #

在切换当前按钮状态前，先关闭所有其他展开的下拉项：

function myFunction(obj) {
  // 获取所有下拉按钮
  const allBtns = document.querySelectorAll('.dropdown-btn');
  
  // 遍历所有按钮，关闭非当前按钮的展开状态
  allBtns.forEach(btn => {
    if (btn !== obj) {
      btn.classList.remove('dropdown-btn-active');
      // 关闭对应下拉列表（假设下拉是按钮的下一个兄弟元素）
      btn.nextElementSibling.classList.remove('dropdown-show');
    }
  });
  
  // 切换当前按钮的激活状态和对应下拉列表
  obj.classList.toggle('dropdown-btn-active');
  obj.nextElementSibling.classList.toggle('dropdown-show');
}

2. 修正window.onclick的变量错误并保留外部点击关闭逻辑 #

原代码中dropdowns变量未定义，替换为实际获取的按钮集合：

window.onclick = function(event) {
  if (!event.target.matches('.dropdown-btn')) {
    const allBtns = document.querySelectorAll('.dropdown-btn');
    allBtns.forEach(btn => {
      btn.classList.remove('dropdown-btn-active');
      btn.nextElementSibling.classList.remove('dropdown-show');
    });
  }
}

关键逻辑说明 #

• 点击按钮时，先遍历所有同class按钮，把不是当前点击的按钮的激活状态和对应下拉列表关闭，再切换当前按钮的状态，保证同一时间只有一个下拉列表展开。
• 点击按钮外部区域时，直接关闭所有下拉列表，保留原有逻辑不变。
• 如果你的下拉列表不是按钮的下一个兄弟元素，需要调整btn.nextElementSibling为实际获取下拉列表的方式（比如通过querySelector查找子元素）。

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