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

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。

我遇到的问题是，虽然向下滑动工作正常，但当用户将鼠标悬停在子菜单上时菜单会向上滑动，当然，我不希望子菜单向上滑动直到鼠标/光标离开 @ 987654324@或#sub_nav。

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

导航项目结构截图

Answer 1

你可以用div#wrapper包裹#sub_nav，这样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");
});

DEMO