如何修复响应式折叠菜单中点击无响应的跳转链接问题？

问题根因 #

原有代码逻辑为视口宽度≤992px时，只要点击了带有.menu-item-has-children类的菜单项，就直接阻止浏览器默认跳转行为，因此顶级链接无法正常跳转；如果删除e.preventDefault()，点击后浏览器会立刻执行跳转动作，子菜单的展开逻辑还未触发就已经离开当前页面，因此子菜单无法弹出。

适配方案 #

采用移动端导航通用交互逻辑：第一次点击带子菜单的顶级菜单项时，仅弹出子菜单不跳转；第二次点击该顶级菜单项时，正常触发链接跳转。修改后的代码如下：

document.addEventListener("click",function(e){
  const currentMenu = e.target.closest(".menu-item-has-children");
  if (!currentMenu || window.innerWidth > 992) return

  const isSubmenuOpen = currentMenu.dataset.submenuOpen === "true"
  if (isSubmenuOpen) {
    // 子菜单已展开，允许跳转，重置状态标记
    currentMenu.dataset.submenuOpen = "false"
  } else {
    // 子菜单未展开，阻止跳转，标记为已展开，让子菜单弹出逻辑执行
    e.preventDefault()
    currentMenu.dataset.submenuOpen = "true"
    // 可选：重置其他菜单项的状态，避免多个子菜单同时展开
    document.querySelectorAll(".menu-item-has-children").forEach(menu => {
      if (menu !== currentMenu) menu.dataset.submenuOpen = "false"
    })
  }
})

补充说明 #

如果你的站点已有子菜单关闭逻辑（比如点击页面空白区域关闭子菜单、点击子菜单内的链接关闭父级菜单），需要在对应逻辑中同步将对应顶级菜单项的data-submenu-open属性设置为false，保证交互状态一致。

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