当鼠标悬停在子菜单上时，阻止滑动的子菜单向上滑动

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。

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

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

净资产值项目的结构清晰

Answer 1

你可以将#sub_nav换成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");
});

DEMO