在 jQuery 中将鼠标悬停在子菜单上时无法保留子菜单

Question

尝试获取它，以便当我将鼠标悬停在“问题”选项卡上时，子菜单会下降，当您离开该选项卡时，它会消失。但是，当用户将鼠标悬停在子菜单上时，我希望它保留下来。那是不起作用的部分，即使设置超时功能设置为 3 秒，它也会立即消失。我不知道为什么会这样做。

let timeout;

$('nav > ul li:first-child').on('mouseenter click', function () {
        if ($('.issues').css('display') == 'none') {
            $('.issues').slideDown('slow'); 
        }
        else {
            $('.issues').slideUp();
        } 
        }).on('mouseleave', function () {
            timeout = setTimeout(function () {
                $('.issues').slideUp();
            }, 3000);
        });

    $('.issues').mouseenter(function() {
        clearTimeout(timeout);
    });

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

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

Answer 1

UL 应位于 LI 中才能成为有效的 HTML。这样，您就不需要子菜单来取消超时，因为鼠标尚未离开 LI

let timeout;

$('nav > ul li:has(ul)').on('mouseenter click', function() {
  window.clearTimeout(timeout);
  if ($('.issues').css('display') == 'none') {
    $('.issues').slideDown('slow');
  } else {
    $('.issues').slideUp();
  }
}).on('mouseleave', function() {
  timeout = setTimeout(function() {
    $('.issues').slideUp();
  }, 3000);
});

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

<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>