jquery - 使用 jQuery 和绝对定位的 div 用于下拉菜单。当光标仍在 div 上时停止隐藏菜单

Question

我决定在我的下拉菜单中使用 float div，因为我可以应用阴影和圆角。

我有以下列表项:

<li class="navDrop" id="navEvents"><a href="#">Events</a></li>

以及与菜单项对应的以下 div:

<div class="navSub" id="navEventsDrop"> Events </div>

我目前正在使用以下脚本来处理元素的显示/隐藏(请注意，我已将处理程序应用到一个类，该类链接 li 和相应的 div 的 id):

<script type="text/javascript">
$(".navDrop").mouseenter(
  function () {
    $('#'+this.id+'Drop').css({
          position:'absolute',
          top: $(this).offset().top + $(this).height() + 'px',
          left: $(this).offset().left + 'px',
          zIndex:1000
    }).show();
});

$(".navDrop").mouseleave(
  function () {
    $('#'+this.id+'Drop').hide();
});
</script>

我的问题是，一旦光标离开 li，div 就会消失，无论光标是否仍在 div 上。

除了将 div 放在 .navDrop 类中之外，我想不出解决方案。但我尝试这样做，它只是奇怪地定位 div。

谢谢。

Answer 1

尝试包装每个元素

<div class="navItem">
  <li class="navTitle" id="navEvents"><a href="#">Events</a></li>
  <div class="navContent" id="navEventsDrop" style="display:none"> Events </div>
</div>

然后是 jQuery:

$('.navItem').mouseenter(function() {
   $(this).children('.navContent').show();
})

$('.navItem').mouseleave(function() {
   $(this).children('.navContent').hide();
})