javascript - 如果鼠标悬停在 div 上然后显示菜单

Question

我有以下悬停时级联的菜单，但我需要添加一些条件检查，例如鼠标是否悬停在 div 上，然后保持菜单向下滑动。

此外，如果鼠标悬停在 LI 上，则向下检查它们的菜单。

如您所见，一旦您离开“div”，它就会向下滑动并向后滑动。

我卡住了......并且已经尝试了几个小时搜索 if 语句等，我只是无法获得正确的语法。

我的例子

Answer 1

使其成为 的子项<div>，然后在您离开时它不会取消该事件。

另外我应该注意，从嵌套列表中进行导航更具语义（例如

• 类别
  • 物品
  • 物品

<ul>
    <li>Category 
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>

Answer 2

这是一个工作示例

HTML

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Javascript/JQuery

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

如果您问我，当您使用 mousehover/mouseenter 进行此类操作时，它会变得非常混乱。我更喜欢在第一次悬停之后使用点击事件或其他东西，这样用户就不会对所有这些动作感到恼火。

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});

Answer 3

^{我试图摆弄你的小提琴，但标记和 css 很混乱。}

正如Rikudo所说，你应该让 div ，它的孩子这样做更容易。我创建了一个最简单的手风琴骨架。你可以在这里看到它。

它做你想做的一切。但是，对于自定义和其他事情，我将由您决定。

Answer 4

http://jsfiddle.net/dttdB/13/

当鼠标离开时，您已将悬停附加到标题 div，悬停效果将丢失。