如何实现点击下拉按钮时关闭其他下拉菜单并切换当前菜单状态

本文介绍一种基于 css 类控制的健壮下拉菜单交互方案：点击任一按钮时，自动关闭其他所有下拉列表，并切换当前菜单的展开/收起状态，避免 dom 操作混乱与 `this` 指向错误。

在构建多组下拉菜单（Dropdown）时，一个常见需求是：点击某个下拉按钮，应展开其对应菜单，同时确保其余所有菜单处于关闭状态；若再次点击已展开的按钮，则收起该菜单。原始代码试图通过直接操作 style.display 实现，但因 this.nextElementSibling 在 forEach 回调中作用域丢失、且未正确绑定当前按钮所属的 .dropdown 上下文，导致“点击已展开项无法关闭自身”的问题。

更优雅、可维护性更强的解法是：将状态管理交由 CSS 类（如 .is-active）驱动，JavaScript 仅负责切换类名，样式层统一控制显示逻辑。

✅ 推荐实现方式（类驱动 + 事件委托）

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  const btn = dropdown.querySelector('.dropdown-btn');
  btn.addEventListener('click', () => {
    // 遍历所有下拉容器：对当前项 toggle .is-active，其余项 remove
    dropdowns.forEach(el => {
      el.classList[el === dropdown ? 'toggle' : 'remove']('is-active');
    });
  });
});

配套 CSS（语义清晰、易于扩展）：

.container {
  display: flex;
  gap: 50px;
}

.dropdown .dropdown-list {
  display: none; /* 默认隐藏 */
}

.dropdown.is-active .dropdown-list {
  display: block; /* 仅当父容器有 .is-active 时显示 */
}

HTML 结构保持简洁，关键在于 .dropdown 作为状态容器包裹按钮与列表：

  
    Dropdown 1
    

      
 Item 1
      
 Item 2
      
 Item 3
    
  

  
    Dropdown 2
    

      
 Item 4
      
 Item 5
      
 Item 6
    
  

? 为什么这样更好？

• 解耦关注点：JS 不再手动设置 display，避免内联样式污染、提升可测试性；
• 精准作用域：以 .dropdown 为单位管理状态，天然规避 nextElementSibling 查找失效风险；
• 样式可扩展：.dropdown.is-active .dropdown-btn 可轻松添加高亮、旋转箭头等视觉反馈；
• 无障碍友好：配合 aria-expanded 属性（建议补充），可进一步增强可访问性；
• 性能稳定：classList.toggle() 是原生高效 API，无重排开销。

⚠️ 注意事项

• 确保每个 .dropdown 容器结构一致（按钮 + 列表），否则 querySelector('.dropdown-btn') 可能失败；
• 若需支持键盘操作（如 Enter/Space 触发），应在按钮上监听 keydown 事件并阻止默认行为；
• 在真实项目中，建议将上述逻辑封装为可复用函数或自定义 Hook（如 React 中）。

通过将状态抽象为 CSS 类，你不仅解决了“点击不关闭自身”的 Bug，更获得了一个结构清晰、易于定制和长期维护的下拉菜单系统。