本文介绍一种基于 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 作为状态容器包裹按钮与列表：
? 为什么这样更好？
- 解耦关注点：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，更获得了一个结构清晰、易于定制和长期维护的下拉菜单系统。
