本文介绍一种基于 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 结构保持清晰语义（注意： 包裹 更符合无障碍规范）：

  
    Dropdown 1
    

      
 Item 1
      
 Item 2
      
 Item 3
    
  
  
    Dropdown 2
    

      
 Item 4
      
 Item 5
      
 Item 6
    
  

⚠️ 关键优势与注意事项

• 解耦逻辑与样式：显隐由 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。

该方案不仅修复了“无法关闭自身”的核心问题，更奠定了可维护、可测试、可无障碍访问的交互基础。