淡入淡出jQuery中懸停的元素

我正在使用菜單。如果用戶將光標移動到菜單的主要元素上，它將顯示一個子菜單（它有一個隱藏延遲），但是如果將光標移動到另一個主體元素上，則前一個元素仍然會顯示在新元素的後面（並且只是通過延遲隱藏）。淡入淡出jQuery中懸停的元素

當我將光標移到另一個主體元素上時，如何隱藏前一個元素？

下面是菜單：

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

來源

2017-08-30 victor

它會真正幫助，如果你想添加一個小提琴（： –

你並不需要一個小提琴;該代碼可以從一個堆棧段執行我格式化代碼並把它放入其中:) –

@ObsidianAge謝謝，我需要了解我該如何做到這些！ – victor

我改變你的第二個菜單ID，以＃降兩。

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

來源

2017-08-30 00:35:48

我使用了hide（）和show（），但它也適用於fadeIn（）和fadeOut（）。 –

這裏的問題是，如果我將光標自動移動到另一個元素的子菜單將隱藏，我希望子菜單等待特定的時間來隱藏 – victor

我改變了我的代碼一點點。這更像你要找的東西嗎？ –

淡入淡出jQuery中懸停的元素

回答

相關問題