javascript - 如何正确隐藏滑动菜单？

Question

我有以下菜单:

<div id="menuItem">Item1</div>

<div id="subMenu">
<ul>
    <li>subitem1</li>    
    <li>subitem2</li>    
    <li>subitem3</li>    
</ul>
</div>
​

动画是这样的:

$('#menuItem').mouseenter(function() {
    $('#subMenu').slideDown(400);
}).mouseleave(function() {
    $('#subMenu').hide(400);
});
​

不幸的是，当鼠标离开子菜单时，子菜单消失了。如何使子菜单仅在鼠标离开菜单项或子菜单列表时消失？我希望能够将鼠标悬停在子菜单上。请注意，两个菜单之间存在间隙。

jsFiddle here

Answer 1

使子菜单实际上“位于”您要将事件附加到的菜单项的“内部”，这样只有当用户实际离开菜单区域时才会发生 in/out 事件

像这样:

CSS

#menuItem {

 cursor: pointer;
 width: 100px;
}

#menuItem .title {
    background-color: orange; 
}

#subMenu {
 background-color: grey;
 margin-top: 5px;   
 cursor: pointer;
 display:none;
 width: 80px;
}​

html

 <div id="menuItem">
    <div class="title">Item1</div>
    <div id="subMenu">
        <ul>
            <li>subitem1</li>    
            <li>subitem2</li>    
            <li>subitem3</li>    
        </ul>
    </div>
</div>​​​​​​​​​

js

$('#menuItem').mouseenter(function() {
    $('#subMenu').slideDown(400);
}).mouseleave(function() {
    $('#subMenu').hide(400);
});

友情提示:

您可能希望在为菜单设置动画之前使用某种形式的 .stop(true, true)，否则在菜单上快速来回移动光标将导致动画“堆叠” "，用户只会觉得很奇怪。请参阅此处的讨论:Where to put clearQueue in jQuery code

所以它看起来像这样:

$('#menuItem').hover(function() {
  $('#subMenu').stop(true, true).slideDown(200);
}, function() {
    $('#subMenu').stop(true, true).slideUp(200);
});