在jQuery中使用懸停淡入和淡出元素

Question

我正在使用菜單。 如果用戶將光標移到菜單的主要元素上，它將顯示一個子菜單（它有一個隱藏的延遲），但是如果我將光標移到另一個主元素上，則先前的元素仍顯示在新元素的后面（並且只是躲過延遲而隱藏）。

將光標移到另一個主要元素上時如何隱藏上一個元素？

以下是菜單：

 $('li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="main-menu" class="nav navbar-nav ref"> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li> </li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> </ul> </li> </ul> </li> </ul> 

Answer 1

我將您的第二個菜單ID更改為＃drop-two。

 $(document).ready(function(){ $('.dropdown-menu, .dropdown-menu2').hide(); $('#drop-to').mouseover(function() { $('.dropdown-menu').fadeIn(); }) $('#drop-to').mouseout(function() { $('.dropdown-menu').fadeOut(1000); }) $('#drop-two').mouseover(function() { $('.dropdown-menu2').fadeIn(); }) $('#drop-two').mouseout(function() { $('.dropdown-menu2').fadeOut(1000); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="main-menu" class="nav navbar-nav ref"> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li> </li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large option"> <a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu2 dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> </ul> </li> </ul> </li> </ul>