如何实现打开单个子菜单时自动关闭其他子菜单？

核心思路：点击任意子菜单触发器时，先关闭所有已展开的其他子菜单，再切换当前子菜单的显示状态，实现同一时间仅一个子菜单展开的效果。

示例代码实现 #

假设你的子菜单通过active类控制显示/隐藏，以下是适配后的JavaScript逻辑：

// 获取所有子菜单触发元素
const submenuTriggers = document.querySelectorAll('.submenu-trigger');

submenuTriggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免干扰父级下拉菜单逻辑
    
    // 获取当前关联的子菜单容器
    const currentSubmenu = this.nextElementSibling;
    // 筛选出所有已展开的子菜单
    const activeSubmenus = document.querySelectorAll('.submenu-content.active');
    
    // 关闭所有非当前的已展开子菜单
    activeSubmenus.forEach(submenu => {
      if (submenu !== currentSubmenu) {
        submenu.classList.remove('active');
        // 同步移除对应触发器的状态类（如果有样式需求）
        submenu.previousElementSibling.classList.remove('active');
      }
    });
    
    // 切换当前子菜单的展开/收起状态
    currentSubmenu.classList.toggle('active');
    this.classList.toggle('active');
  });
});

关键注意事项 #

• 替换代码中的.submenu-trigger和.submenu-content为你项目中实际使用的类名；
• 如果你的触发器有样式变化（比如箭头旋转），需同步切换触发器的状态类；
• e.stopPropagation()用于避免点击子菜单时触发父级下拉菜单的关闭逻辑，保证子菜单控制独立。

若你的原有代码基于其他逻辑（如dataset属性、自定义事件），只需将「关闭所有其他子菜单」的核心逻辑嵌入即可。

内容的提问来源于stack exchange，提问作者Shobi