Jquery悬停下拉菜单关闭问题

Jquery hover dropdown menu closing issue

本文关键字：问题 下拉菜单 悬停 Jquery      更新时间：2023-09-26

我有一个问题，jQuery滑动切换悬停。假设我在导航容器中有2个导航项。每个都有自己的子菜单项。一切都运行良好，但如果有人开始"猴子测试"，那么就会出现一些问题。其中之一，当鼠标不在导航容器(<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);
});

试试这个

$('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>

相关文章：