本文讲解如何使用原生 javascript 实现多组同级下拉按钮的“单开互斥”效果：点击任一按钮时，自动关闭其他已展开的下拉列表，仅保留当前按钮对应的内容可见。
本文讲解如何使用原生 javascript 实现多组同级下拉按钮的“单开互斥”效果：点击任一按钮时，自动关闭其他已展开的下拉列表，仅保留当前按钮对应的内容可见。
在构建具有多个下拉控件的界面（如导航菜单、筛选面板）时，一个常见需求是：同一时间只允许一个下拉列表处于展开状态。若采用 onclick="myFunction(this)" 内联方式绑定事件，不仅难以统一管理状态，还容易因事件作用域混乱导致逻辑错误（例如：点击另一个按钮后前一个列表未关闭）。正确的做法是解耦事件监听与状态控制，通过集中式状态清理 + 局部激活来实现互斥行为。
✅ 推荐实现方案（现代、可维护、无内联 JS）
首先，移除 HTML 中的内联 onclick，改用 addEventListener 统一管理：
<button class="dropdown-btn">Pirkt tiešsaistē</button> <div class="dropdown-list">First</div> <button class="dropdown-btn">Pirkt tiešsaistē</button> <div class="dropdown-list">Two</div>
对应的 JavaScript（推荐使用 querySelectorAll + forEach）：
// 清空所有已激活的 dropdown-btn
function clearAllDropdownButtons() {
document.querySelectorAll('.dropdown-btn').forEach(btn => {
btn.classList.remove('dropdown-btn-active');
});
}
// 为每个按钮绑定点击事件
document.querySelectorAll('.dropdown-btn').forEach(button => {
button.addEventListener('click', function (e) {
// 若当前按钮未激活，则先关闭全部，再激活自身
if (!this.classList.contains('dropdown-btn-active')) {
clearAllDropdownButtons();
}
this.classList.toggle('dropdown-btn-active');
});
});
// 点击页面任意非按钮区域时，关闭所有下拉
window.addEventListener('click', function (event) {
if (!event.target.matches('.dropdown-btn')) {
clearAllDropdownButtons();
}
});? CSS 驱动显示逻辑（无需 JS 操作 DOM 显示属性）
利用 CSS 相邻兄弟选择器（+），让 .dropdown-btn-active 的存在直接控制后续 .dropdown-list 的显隐：
立即学习“Java免费学习笔记（深入）”；
.dropdown-list {
display: none;
}
.dropdown-btn-active + .dropdown-list {
display: block;
}
/* 可选：添加过渡动画 */
.dropdown-list {
transition: opacity 0.2s ease, max-height 0.3s ease;
}⚠️ 注意事项与最佳实践
- 避免 getElementsByClassName + for 循环：该方法返回的是实时 HTMLCollection，易在循环中引发意外行为；querySelectorAll 返回静态 NodeList，更安全可控。
- 不要依赖 event.target.matches('.dropdown-btn') 判断“是否为按钮”：需注意事件冒泡路径（如按钮内含 <span> 子元素时，target 可能是子元素而非按钮本身）。推荐使用 event.target.closest('.dropdown-btn') 更鲁棒。
- 性能优化建议：若按钮数量极大（>100），可考虑事件委托（委托到父容器），但对常规下拉菜单，直接绑定更清晰直观。
- 可访问性补充：实际项目中建议为按钮添加 aria-expanded 属性，并同步更新其值（true/false），以支持屏幕阅读器。
通过以上结构化设计，你将获得一个健壮、可扩展、符合现代前端规范的多下拉互斥控制方案——既解决了原始问题中“点击其他按钮不关闭前一个”的缺陷，也为后续功能增强（如动画、键盘导航）预留了良好基础。
