本文介绍一种基于 css 类控制的健壮下拉菜单交互方案：通过为父容器添加 `is-active` 类统一管理显隐逻辑，避免 dom 操作混乱，同时支持样式扩展与多级联动。
在构建多个并列下拉组件时，常见的需求是：点击任一按钮，仅展开对应下拉列表，同时收起其他已展开的列表；若再次点击同一按钮，则收起自身列表。原始代码尝试直接操作 display 样式，但因 this.nextElementSibling 在闭包中引用错位、且未正确区分“当前触发元素”与“遍历目标”，导致无法关闭已打开的当前下拉菜单。
推荐采用 语义化、可维护性更强的类名驱动方案：以 .dropdown 为功能单元，通过切换 is-active 类控制状态，将展示逻辑完全交由 CSS 处理，JavaScript 仅负责状态协调。
✅ 推荐实现（简洁 & 可扩展）
const dropdownWrappers = document.querySelectorAll('.dropdown');
dropdownWrappers.forEach(wrapper => {
const btn = wrapper.querySelector('.dropdown-btn');
btn.addEventListener('click', () => {
// 遍历所有下拉容器：当前项切换 is-active，其余移除
dropdownWrappers.forEach(el => {
el.classList[el === wrapper ? 'toggle' : 'remove']('is-active');
});
});
});配套 CSS（利用层叠关系精准控制）：
.dropdown .dropdown-list {
display: none;
}
.dropdown.is-active .dropdown-list {
display: block; /* 或使用 flex / grid 等更现代布局 */
}HTML 结构保持清晰语义（注意：
<div class="container">
<div class="dropdown">
<button class="dropdown-btn">Dropdown 1</button>
<ul class="dropdown-list">
<li><label><input type="checkbox" name="c1" value="1"> Item 1</label></li>
<li><label><input type="checkbox" name="c1" value="2"> Item 2</label></li>
<li><label><input type="checkbox" name="c1" value="3"> Item 3</label></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown-btn">Dropdown 2</button>
<ul class="dropdown-list">
<li><label><input type="checkbox" name="c2" value="4"> Item 4</label></li>
<li><label><input type="checkbox" name="c2" value="5"> Item 5</label></li>
<li><label><input type="checkbox" name="c2" value="6"> Item 6</label></li>
</ul>
</div>
</div>⚠️ 关键优势与注意事项
- 解耦逻辑与样式：显隐由 display 的 CSS 规则控制，JS 不再硬编码样式值，便于主题切换或动画过渡（如配合 max-height + transition 实现淡入滑动效果）。
- 避免 this 上下文陷阱：原代码中 this.nextElementSibling 在 forEach 回调里指向错误对象；新方案通过闭包捕获 wrapper，确保上下文准确。
-
无障碍友好：建议为 .dropdown-btn 添加 aria-expanded 属性，并同步更新（点击时取反），例如：
btn.setAttribute('aria-expanded', wrapper.classList.contains('is-active')); - 可扩展性强：只需新增 .dropdown.is-active .dropdown-btn { background: #007bff; } 即可高亮激活按钮，无需修改 JS。
该方案不仅修复了“无法关闭自身”的核心问题，更奠定了可维护、可测试、可无障碍访问的交互基础。
