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);
});

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

jsFiddle here

Answer 1

使子菜单实际上“放入”您要附加事件的菜单项，这样只有当用户实际离开菜单区域时才会发生输入/输出事件

像这样：

<强> 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);
});

Answer 2

试试这个：

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

这适用于我的浏览器（firefox）

Answer 3

将菜单和子菜单放在同一容器中总是好的，这样在导航子菜单时就不需要单独的鼠标处理程序了。

DEMO

<强> HTML：

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

<强> JS：

$('#subMenu').mouseenter(function() {
    $('#subMenu ul').slideDown(400);
    isInsideSubMenu = true;
}).mouseleave(function() {
    $('#subMenu ul').hide(400);
});

CSS：

#subMenu ul { display:none;}

Answer 4

假设您想要保持完全相同的html结构，您可以使用以下代码：

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

请注意，只有当鼠标离开#subMenu时，我才告诉jQuery隐藏#subMenu。

Answer 5

或者如果您不想在menuitem中设置子菜单（可能会弄乱您的CSS，您可以将所有内容包装在父div中：

HTML：

<div id="all">
    <div id="menuItem">Item1</div>
    <div id="subMenu">
    <ul>
        <li>subitem1</li>    
        <li>subitem2</li>    
        <li>subitem3</li>    
    </ul>
    </div>
</div>

jQuery的：

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

如何正确隐藏滑动菜单？

5 个答案: