如何实现无需点击即可保持子菜单展开的导航效果

你的核心问题出在把hover事件绑定在了<a>标签上——当鼠标从<a>移到下方的子菜单区域时，会触发hover的离开回调，直接把刚展开的子菜单收起来，这就是为什么你没法保持子菜单展开的原因。

正确的思路是把hover事件绑定在父级的<li>元素上，这样整个菜单项（包括<a>标签和它下面的子菜单）都属于hover的有效范围，鼠标在这个范围内移动时，不会触发离开逻辑，子菜单就能保持展开状态。

下面是修改后的完整代码：

// 将hover事件绑定到li父元素，而非a标签
$("#nav_evnavmenu > li").hover(
  // 鼠标进入菜单项时的处理逻辑
  function() {
    // 先关闭所有已展开的子菜单，确保同一时间只显示一个
    $("#nav_evnavmenu .selected div div").slideUp(100);
    $("#nav_evnavmenu .selected").removeClass("selected");
    
    // 检查当前菜单项是否有子菜单
    const $subs = $(this).find(".subs");
    if ($subs.length) {
      $(this).addClass("selected");
      $subs.children().slideDown(200);
    }
  },
  // 鼠标离开菜单项时的处理逻辑
  function() {
    const $currentLi = $(this);
    // 加个小延迟，避免鼠标快速移动时误关闭子菜单，提升用户体验
    setTimeout(() => {
      // 确认鼠标确实离开了当前菜单项和子菜单区域
      if (!$currentLi.is(":hover") && !$currentLi.find(".subs").is(":hover")) {
        $currentLi.find(".subs").children().slideUp(100);
        $currentLi.removeClass("selected");
      }
    }, 150);
  }
);

关键修改点说明： #

• 绑定对象调整：从#nav_evnavmenu > li > a改为#nav_evnavmenu > li，让整个菜单项成为hover的触发范围。
• 延迟关闭逻辑：加入150ms的延迟，避免用户快速切换菜单项或不小心移出一点就关闭子菜单，优化交互体验。
• 保留原有逻辑：依然保留了关闭其他已展开子菜单的代码，确保界面不会同时显示多个子菜单，保持整洁。

另外，你之前写的$('.wrp2').on('mouseleave')可以删除了，现在的hover离开回调已经能正确处理子菜单的关闭逻辑。

测试一下这个方案：

1. 鼠标移到"Menu 1"或"Menu 2"上，子菜单会平滑展开
2. 鼠标移到子菜单内部，子菜单会保持展开状态
3. 鼠标完全移开整个菜单项（包括子菜单），子菜单会平滑收起
4. 切换到另一个菜单项时，之前的子菜单会自动关闭

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