jQuery下拉菜单问题：悬停子菜单时无法保持显示

核心问题 #

你遇到的问题本质是事件触发顺序和DOM结构不合理导致的：

1. 当鼠标从父<li>移到同级的.issues子菜单时，会先触发父<li>的mouseout事件，此时子菜单的active类还没被添加，所以你的判断条件!$('.issues').hasClass('active')会成立，导致子菜单被收起。
2. 你的HTML结构中，父<li>和子菜单<ul>是同级关系，而非嵌套关系，这违背了导航菜单的常规DOM结构，也让mouseenter/mouseleave的事件特性无法正常发挥（mouseleave只会在鼠标完全离开元素及其子元素时触发）。

解决方案 #

方案1：修正DOM结构（推荐）

把.issues子菜单嵌套到父<li>内部，这样利用mouseenter/mouseleave的特性，鼠标在父元素和子菜单之间移动时，不会触发父元素的mouseleave事件，自然就能保持子菜单显示。

修正后的HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a>Issues</a>
      <ul class="issues">
        <li><a>X</a></li>
        <li><a>Y</a></li>
        <li><a>Z</a></li>
      </ul>
    </li>
    <li><a>Press Releases</a></li>
    <li><a>Donate</a></li>
  </ul>
</nav>

简化后的JS代码（不需要额外的active类）：

$('nav > ul > li').hover(
  function() {
    $(this).find('.issues').slideDown('slow');
  },
  function() {
    $(this).find('.issues').slideUp('slow');
  }
);

CSS保持不变：

.issues {
  display: none;
  position: static;
  margin-top: 0;
  padding-left: 0;
}

方案2：不修改DOM结构的兼容处理（不推荐）

如果必须保留原DOM结构，可以通过延迟判断来规避事件顺序问题，在父元素的mouseout事件中延迟执行收起逻辑，让子菜单的active类有时间被添加：

$('.issues').hover(
  function() {
    $(this).addClass('active');
  },
  function() {
    $(this).removeClass('active');
    // 子菜单离开时直接收起
    $(this).slideUp('slow');
  }
);

$('nav > ul > li').hover(
  function() {
    if ($(this).next().prop('nodeName') === 'UL') {
      $(this).next().slideDown('slow');
    }
  },
  function() {
    const $subMenu = $(this).next();
    if ($subMenu.prop('nodeName') === 'UL') {
      // 延迟100ms判断，确保子菜单的hover事件已执行
      setTimeout(() => {
        if (!$subMenu.hasClass('active')) {
          $subMenu.slideUp('slow');
        }
      }, 100);
    }
  }
);

关于事件优先级的说明 #

jQuery并没有提供直接调整事件监听器优先级的API，因为浏览器的事件触发顺序是由事件冒泡/捕获机制决定的，优先级调整不是解决这类问题的合理方案，修正DOM结构或利用事件特性才是更可靠的方式。

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