如何实现点击下拉按钮时关闭其他下拉菜单并切换当前菜单显隐状态

本文介绍一种基于 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（利用层叠关系精准控制）：

Videoleap

Videoleap是一个一体化的视频编辑平台

下载

.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。

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