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

私は＃ドロップ2に2番目のメニュー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>