Jquery悬停下拉菜单关闭问题

问题描述：

我在悬停时出现jQuery slideToggle问题。假设我在导航容器中有2个导航项。每个都有自己的子菜单项。一切工作正常，但如果有人开始“猴子测试”它，那么就出现了一些问题。其中之一，当鼠标不在导航容器上时（<nav>），菜单仍处于打开状态。Jquery悬停下拉菜单关闭问题

的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文件（部分）：

当鼠标不上导航容器（

@HeadInCloud号码它工作的很好，但是当用户开始像疯了一样闪烁时，那么这个'问题' –

答

试试这个

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

Jquery悬停下拉菜单关闭问题

相关推荐