jQuery的悬停下拉菜单关闭问题

Question

我在悬停时遇到jQuery slideToggle的问题。 可以说我在导航容器中有2个nav-item。 每个都有其自己的子菜单项。 一切工作正常，但是如果有人开始“猴子测试”，那么就会出现一些问题。 其中之一，当鼠标不在导航容器（ <nav> ）上时，菜单仍处于打开状态。

HTML：

<nav>
    <ul class="navigation lvl-1">
        <li>
            Menu1
            <ul class="sub-menu lvl-2">
                <li>Submenu1-1</li>
                <li>Submenu1-2</li>
            </ul>
        </li>
        <li>
            Menu2
            <ul class="sub-menu lvl-2">
                <li>Submenu2-1</li>
                <li>Submenu2-2</li>
            </ul>
        </li>
    </ul>
</nav>

这是JS文件（部分）：

$('nav ul.lvl-1 > li').hover(function () {
    $(this).children('.lvl-2').not(':animated').slideToggle(300);
});

Answer 1

尝试这个

 $('nav ul li').hover(function () { $(this).children('ul').slideToggle(300); }); 

 nav ul li ul{ display:none; } nav ul{ display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <nav> <ul class="navigation lvl-1"> <li> Menu1 <ul class="sub-menu lvl-2"> <li>Submenu1-1</li> <li>Submenu1-2</li> </ul> </li> <li> Menu2 <ul class="sub-menu lvl-2"> <li>Submenu2-1</li> <li>Submenu2-2</li> </ul> </li> </ul> </nav>