jquery - 将鼠标悬停在子菜单上时停止滑动子菜单向上滑动

Question

我有以下脚本来处理向下滑动子菜单：

$('#nav li #bottom').hover(function() {
    $(this).closest('#nav li').find('#sub_nav').slideDown("slow");
},
function() {
    $(this).closest('#nav li').find('#sub_nav').slideUp("slow");
});

脚本以这种方式编写，因此只有当用户将鼠标悬停在导航列表项中的一个 div 上时才会触发向下滑动，即 #bottom。

我遇到的麻烦是，虽然向下滑动工作正常，但当用户将鼠标悬停在子菜单上时菜单会向上滑动，当然，我不希望子菜单向上滑动，直到鼠标/光标离开#nav li #bottom或#sub_nav.

我在这里创建了一个 jsfiddle，以便您可以看到正在运行的菜单。

NAV 项目结构的屏幕截图

Answer 1

您可以包装#sub_navby div#wrapper，这种方式sub_menu是底部的一部分：

<div id="bottom">
    <a href="#">Menu Item 1</a>
    <ul id="sub_nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>

你也可以使用stop()方法：

$('#nav li #bottom').hover(function() {
    $(this).find('#sub_nav').stop().slideDown("slow");
},
function() {
    $(this).find('#sub_nav').stop().slideUp("slow");
});

演示