Mega Menu点击展开时无法关闭其他已打开下拉菜单如何解决？

问题原因 #

你原代码的关闭其他菜单逻辑仅在页面初始化遍历导航项时执行一次，没有绑定到点击事件回调中，点击菜单时不会触发该逻辑，因此无法实现自动关闭其他展开菜单的效果。同时混用类名控制和直接修改style.display的样式控制方式，容易出现样式优先级冲突。

修复方案 #

点击某一导航项时，先移除所有非当前菜单的激活类，再单独切换当前对应菜单的激活状态即可，修复后代码如下：

const navLinks = document.getElementsByClassName("menu-item-has-children");
// 直接复用你原代码中定义的dropDownMenu菜单集合即可
const allMenus = dropDownMenu;

for (let i = 0; i < navLinks.length; i++) {
  const currentMenu = document.querySelector(`#${dropDownMenu[i].id}`);
  navLinks[i].addEventListener("click", (e) => {
    // 可选：如果导航链接是a标签，可加这行阻止默认跳转行为
    e.preventDefault();
    // 遍历所有mega菜单，关闭非当前的已展开菜单
    for (let j = 0; j < allMenus.length; j++) {
      const targetMenu = document.querySelector(`#${allMenus[j].id}`);
      if (targetMenu !== currentMenu) {
        targetMenu.classList.remove("display-on");
      }
    }
    // 切换当前点击对应菜单的展开状态
    currentMenu.classList.toggle("display-on");
  });
}

注意事项 #

所有mega菜单的显隐统一通过display-on类控制即可，无需额外直接修改display样式属性，避免样式优先级冲突导致效果异常。

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