响应式桌面端水平/移动端垂直多级手风琴式下拉菜单问题求助

问题1：打开新顶部菜单项时旧项不会自动关闭 #

你需要在顶级菜单项的点击事件逻辑中增加「先关闭其他已展开项」的前置处理，参考代码如下：

// 替换为你实际使用的顶级菜单项选择器
const topMenuItems = document.querySelectorAll('.menu > .menu-item-has-children');

topMenuItems.forEach(item => {
  item.addEventListener('click', (e) => {
    // 遍历所有已展开的顶级项，排除当前点击项后全部收起
    topMenuItems.forEach(openItem => {
      if (openItem !== item && openItem.classList.contains('open')) {
        openItem.classList.remove('open');
      }
    })
    // 切换当前项的展开状态
    item.classList.toggle('open');
    e.stopPropagation();
  })
})

如果是桌面端hover触发的展开逻辑，可以同步在CSS的hover规则中做排他处理，避免多个顶级菜单同时展开。

问题2：子菜单项hover高亮失效 #

该问题通常由两种原因导致，对应修复方案如下：

• 事件被拦截：检查子菜单项或者父级容器有没有设置pointer-events: none属性，如有则给子菜单项单独设置pointer-events: auto即可恢复hover事件接收。
• 样式优先级不足：你写的子项hover样式被更高优先级的规则覆盖，可通过提升选择器优先级解决，参考CSS代码：

/* 替换为你实际的菜单类名，选择器层级越深优先级越高 */
.site-header .main-menu .sub-menu li a:hover {
  background: #efefef; /* 替换为你的高亮背景色 */
  color: #222; /* 替换为你的高亮文字色 */
}

你可以通过浏览器开发者工具的元素检查面板，查看子菜单项hover状态下的样式应用情况，确认被覆盖的规则后调整选择器即可。

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