导航栏嵌套子菜单hover时无法保持显示问题求助

问题分析 #

1. 变量作用域错误：控制台提示submenu未定义，是因为submenu变量在$(document).ready()内部用let声明，外部的$(".dropdown-submenu").on()事件监听函数无法访问该变量，导致报错。
2. 子菜单消失问题：当鼠标从parentdrop移到dropdown-submenu时，会先触发parentdrop的mouseleave事件隐藏子菜单，此时即使鼠标进入子菜单，也无法重新显示，事件逻辑未处理连续hover的情况。

解决方案一：修复jQuery代码逻辑 #

第一步：修正变量作用域 #

将submenu变量声明移到ready函数内部的全局区域，确保所有事件监听都能访问：

$(document).ready(function(){
  let submenu =  document.getElementsByClassName("dropdown-submenu");
  
  $(".parentdrop").on({
    mouseenter: function () {
      for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "block";
    },
    mouseleave: function (e) {
      // 判断鼠标是否移到子菜单上，是则不隐藏
      if (!$(e.relatedTarget).hasClass("dropdown-submenu") && !$(e.relatedTarget).closest(".dropdown-submenu").length) {
        for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "none";
      }
    }
  });

  // 将子菜单事件监听移到ready函数内部，确保能访问submenu变量
  $(".dropdown-submenu").on({
    mouseenter: function () {
      for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "block";
    },
    mouseleave: function () {
      for (let i = 0; i < submenu.length; i++) submenu[i].style.display = "none";
    }
  });
});

第二步：消除鼠标移动间隙 #

修改dropdown-submenu的top值，避免鼠标从父菜单移到子菜单时出现空白间隙：

.dropdown-submenu {
  display: none;
  z-index: 1;
  left: 100%;
  top: 0; /* 和父元素顶部对齐，消除间隙 */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
}

解决方案二：纯CSS实现（推荐） #

无需JavaScript，用CSS选择器直接控制hover状态，更稳定简洁：

第一步：调整HTML结构 #

将父菜单和子菜单包裹在同一个容器中，方便CSS定位：

<div class="dropdown-content">
  <div class="dropdown-parent-item">
    <a class="parentdrop" href="#">Web Development &#9654;</a>
    <div class="dropdown-submenu">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">JavaScript</a>
    </div>
  </div>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

第二步：添加CSS样式 #

删除原有jQuery代码，添加以下CSS：

.dropdown-parent-item {
  position: relative; /* 让子菜单基于该容器定位 */
}

/* 鼠标悬停容器时显示子菜单 */
.dropdown-parent-item:hover .dropdown-submenu {
  display: block;
}

.dropdown-submenu {
  display: none;
  z-index: 1;
  left: 100%;
  top: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
}

效果说明 #

• 纯CSS方案避免了JS的作用域和事件时序问题，兼容性更强。
• 调整子菜单top值为0，彻底消除鼠标移动时的间隙，确保hover状态连续无中断。

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