hover头部导航链接时子菜单不关闭、切换异常问题咨询

• 选择器使用错误：document.querySelector(".header__link")只会匹配页面中第一个符合规则的导航链接，其余普通导航链接没有绑定hover关闭菜单的事件，导致hover普通链接时已展开菜单不会收起
• 事件重复绑定：同一元素（header、子菜单、导航链接）被重复绑定多次同类型事件，且事件逻辑硬编码只操作某一个固定子菜单，切换子菜单时不会先清空其他菜单的展开状态
• 冗余空事件：代码末尾给Company链接绑定了空的mouseenter回调，干扰正常事件执行
• 缺少统一的菜单关闭逻辑：没有封装全局关闭所有子菜单的方法，各事件各自操作DOM，逻辑冲突导致切换失效

不需要修改原有HTML和CSS，直接替换原有JS代码即可：

// 获取所有DOM元素
const header = document.querySelector(".header");
const allSubmenuLinks = document.querySelectorAll(".header__link[data-opened-menu]");
const allSubmenus = document.querySelectorAll(".header__submenu");
const allNormalLinks = document.querySelectorAll(".header__link:not([data-opened-menu])");

// 统一封装：关闭所有已展开的子菜单
function closeAllSubmenus() {
  header.classList.remove("header__show-submenu");
  allSubmenus.forEach(menu => menu.classList.remove("header__show-submenu"));
}

// 给带子菜单的导航项绑定hover展开事件
allSubmenuLinks.forEach(link => {
  link.addEventListener("mouseenter", () => {
    // 先关闭所有已开的菜单，避免状态冲突
    closeAllSubmenus();
    // 获取当前链接对应的子菜单id
    const menuId = link.dataset.openedMenu;
    const targetSubmenu = document.querySelector(`.header__submenu[data-opened="${menuId}"]`);
    // 展开对应菜单
    header.classList.add("header__show-submenu");
    targetSubmenu.classList.add("header__show-submenu");
  })
})

// 给普通导航链接绑定hover关闭菜单事件
allNormalLinks.forEach(link => {
  link.addEventListener("mouseenter", closeAllSubmenus);
})

// 鼠标离开整个header区域时关闭所有菜单
header.addEventListener("mouseleave", closeAllSubmenus);

• hover普通导航链接时，已展开的子菜单会自动收起
• hover不同带子菜单的导航项时，会自动切换展示对应子菜单，不会出现首次生效后无响应的问题
• 鼠标从导航项移动到下拉子菜单区域时，菜单不会意外收起，符合主流网站导航的交互习惯

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