点击其他下拉菜单时已打开菜单未关闭，如何实现互斥关闭？

核心思路 #

让所有下拉菜单共享状态逻辑——点击任一下拉时，先把所有已展开的菜单关掉，再切换当前菜单的展开状态，同时保留外部点击关闭的原有逻辑。

原生JS实现步骤 #

1. 统一类名标识
   给所有下拉触发按钮加统一类名dropdown-trigger，下拉面板加dropdown-panel，方便批量操作元素。

2. 写个通用的关闭函数
   这个函数负责把所有下拉面板的展开状态（比如active类）移除：

function closeAllDropdowns() {
  document.querySelectorAll('.dropdown-panel').forEach(panel => {
    panel.classList.remove('active');
  });
}

3. 修改下拉触发的点击逻辑
   给每个触发按钮绑定点击事件，先调用关闭函数清空所有展开状态，再切换当前菜单的状态，同时阻止事件冒泡避免触发外部点击的关闭逻辑：

document.querySelectorAll('.dropdown-trigger').forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    e.stopPropagation();
    // 这里根据你的DOM结构获取当前面板，示例是触发按钮的下一个兄弟元素
    const currentPanel = trigger.nextElementSibling;
    closeAllDropdowns();
    currentPanel.classList.toggle('active');
  });
});

4. 保留外部点击关闭
   原来的外部点击关闭逻辑可以直接复用这个关闭函数：

document.addEventListener('click', closeAllDropdowns);

适配不同DOM结构的小技巧 #

如果你的触发按钮和面板不是相邻元素，用data-*属性关联两者更靠谱：

• 给触发按钮加data-target="#dropdown-1"，对应面板加id="dropdown-1"
• 点击时通过document.querySelector(trigger.dataset.target)获取对应面板

框架场景（以Vue为例） #

如果用框架开发，直接用一个全局变量记录当前打开的菜单ID即可，天然实现互斥：

<template>
  <div v-for="item in dropdownList" :key="item.id">
    <button @click="toggleMenu(item.id)">{{ item.title }}</button>
    <div class="dropdown-panel" v-show="openedId === item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openedId: null,
      dropdownList: [
        { id: 1, title: '菜单1', content: '下拉内容1' },
        { id: 2, title: '菜单2', content: '下拉内容2' },
        { id: 3, title: '菜单3', content: '下拉内容3' }
      ]
    };
  },
  methods: {
    toggleMenu(id) {
      this.openedId = this.openedId === id ? null : id;
    }
  }
};
</script>

这样不管是点击其他下拉菜单还是页面外部，都能正确关闭不需要的下拉面板。

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