Question

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

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

正如您所看到的那样，只要您离开“div”，它就会向下滑动并备份。

我陷入困境......并且已经尝试了几个小时来搜索if语句等，我只是无法正确获取语法。

my example

Answer 1

让它成为<div>的孩子，当你离开它时它不会取消该事件。

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

类别
- 项目
- 项目

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

Answer 2

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 3

^{我试图弄乱你的小提琴，但是标记和CSS很麻烦。}

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

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

Answer 4

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

当鼠标离开时，您已将鼠标悬停在标题div上，悬停效果将丢失。

如果鼠标悬停在div上，则显示菜单

4 个答案: