本文讲解如何用纯 javascript 实现多组同级下拉按钮的互斥展开逻辑：点击任一按钮时，仅展开对应下拉列表，同时自动收起其他已展开的列表，避免多个菜单同时显示。
本文讲解如何用纯 javascript 实现多组同级下拉按钮的互斥展开逻辑：点击任一按钮时，仅展开对应下拉列表，同时自动收起其他已展开的列表，避免多个菜单同时显示。
在构建多组联动下拉菜单（如导航栏、筛选器等）时，一个常见需求是：点击某个 .dropdown-btn 按钮时，仅激活其紧邻的 .dropdown-list，且确保其他已激活的按钮及其列表被统一关闭。原始代码中直接使用 onclick="myFunction(this)" 和全局 window.onclick 监听器存在两个关键问题：
- document.getElementsByClassName("dropdown-btn") 与后续 dropdowns[i] 变量名不一致（应为 dropdownBtns），导致运行时错误；
- event.target.matches('.dropdown-btn') 仅判断点击目标是否为按钮本身，但无法区分“点击的是当前按钮”还是“点击了另一个同类型按钮”，因此旧逻辑无法触发已有展开项的关闭。
✅ 正确解法是：将状态管理集中化，通过统一的清除函数 clearBtns() 控制所有按钮的激活状态，并在每次点击时先清空、再激活当前项。以下是完整、健壮的实现方案：
✅ 推荐实现（ES6 + 语义化结构）
// 获取所有下拉按钮
const dropdownButtons = document.querySelectorAll('.dropdown-btn');
// 清除所有按钮的激活状态
function clearBtns() {
dropdownButtons.forEach(btn => {
btn.classList.remove('dropdown-btn-active');
});
}
// 为每个按钮绑定点击事件
dropdownButtons.forEach(button => {
button.addEventListener('click', function(e) {
// 若当前按钮未激活，则先清除所有激活态，再激活自身
if (!this.classList.contains('dropdown-btn-active')) {
clearBtns();
}
this.classList.toggle('dropdown-btn-active');
});
});
// 点击页面任意非按钮区域时，关闭所有下拉
window.addEventListener('click', function(event) {
if (!event.target.closest('.dropdown-btn')) {
clearBtns();
}
});
? CSS 配合（关键：利用相邻兄弟选择器）
.dropdown-btn {
border: none;
background: #eee;
padding: 8px 12px;
cursor: pointer;
}
.dropdown-btn-active {
background: #ffcc00;
}
.dropdown-list {
display: none;
margin-top: 4px;
padding: 8px;
background: #fff;
border: 1px solid #ddd;
}
.dropdown-btn-active + .dropdown-list {
display: block; /* 仅当按钮激活时，显示其后紧跟的 .dropdown-list */
}
✅ HTML 结构（必须严格遵循“按钮 + 紧邻下拉列表”顺序）
<button class="dropdown-btn">Pirkt tiešsaistē</button> <div class="dropdown-list">First menu content</div> <button class="dropdown-btn">Citā veidā</button> <div class="dropdown-list">Second menu content</div>
⚠️ 注意事项
- DOM 结构必须规范：.dropdown-list 必须是 .dropdown-btn 的直接相邻兄弟元素（即 + 选择器生效的前提），否则 CSS 展开逻辑失效；
- 避免内联 onclick：移除 onclick="myFunction(this)"，改用 addEventListener，便于统一维护和解耦；
- closest() 替代 matches()：event.target.closest('.dropdown-btn') 更健壮，能向上查找父级匹配项（例如点击按钮内部 时仍有效）；
- 性能优化：querySelectorAll 返回静态 NodeList，比 getElementsByClassName（动态集合）更推荐用于遍历。
通过该方案，你将获得一个响应迅速、逻辑清晰、易于扩展的下拉菜单系统——无论用户点击哪个按钮，都能确保界面始终只保留一个活跃菜单，大幅提升用户体验与可维护性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
