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

Question

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

此外，如果鼠标悬停在 LI 上，请向下查看菜单。

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

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

my example

Answer 1

Here 是一个工作示例

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 2

将其设为<div> 的子节点，然后它不会在您离开时取消该事件。

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

• 类别
  • 项目
  • 项目

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

Answer 3

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

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

它可以满足您的所有需求。但是对于自定义和其他事情，我会留给你。

Answer 4

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

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