Boostrapメニューの3レベルホバーディレイ

Question

私は、CSS経由でホバーするとアクティブになる3レベルのホバーメニューを持っています。私は、メニューが表示されているときに多少の遅延のフェードインとアウトを実装したいと思いますが、メニューの最後のレベルでそれを行う方法を理解するのが難しいです。

少し遅れても第1レベルは正常に動作しますが、第3レベルを親から開くと遅延は発生しません。

ここに私のJqueryコードがあります。

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

$('ul.nav li#secondary').hover(function() { 
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); 
}, function() { 
$(this).find('.dropdown-men').stop(true, true).delay(200).fadeOut(); 
}); 

Fiddle

私はそれが私のCSSとは何か、ではないのjQuery自体を持っていると思っています。

Answer 1

jqueryとCSSの両方に関係しています。 uはまた、唯一の最初の ドロップダウンを見つけたい最初の要素のホバーに

、そうでない場合の両方が、CSSのサブメニューでは、並列

$('ul.nav li.dropdown').hover(function() { 
    var first = $(this).find('.dropdown-menu')[0]; 
    $(first).stop(true, true).delay(200).fadeIn(); 
}, function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(); 
}); 

$('ul.nav li#secondary').hover(function() { 
    console.log("reached sub here 1"); 
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeIn(); 
    console.log($(this).find('.sub-menu')); 
}, function() { 
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeOut(); 
}); 

にフェードインされているディスプレイに設定してはならない：何も

.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 

.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
} 

.navbar-brand img { 
    position: absolute; 
    left: 50%; 
    top: 0; 
    text-align: center; 
    margin: 0 auto; 
} 

.navbar-toggle { 
    z-index: 3; 
} 

nav.navbar i.fa { 
    padding-left: 5px; 
    padding-right: 5px; 
} 

ul.nav li:hover > ul.dropdown-menu { 
    //display: block; 
} 

#navbar { 
    text-align: center; 
} 

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    display:none; 
    margin-top: -1px; 
} 

.dropdown-menu li:hover .sub-menu, 
.dropdown-menu li:focus .sub-menu { 

} 

#navbar-collapse-new.navbar-collapse { 
    padding-top: 0px; 
    padding-right: 38px; 
} 

HTML：

<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse-new"> 
     <span class="sr-only">Toggle Navigation</span> 
     <span class="icon-bar"> 
     </span><span class="icon-bar"> 
     </span><span class="icon-bar"> 
     </span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse-new"> 
     <ul class="nav navbar-nav navbar-left" role="menu"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false"> 
        <li id="secondary" role="menuitem"> 
        <a href="#">One more separated link</a> 
        <ul class="dropdown-menu sub-menu" role="menu"> 
         <li id="tertiary" role="menuitem"> 
          <a title="Organizer Home Page" class="tertiary-link" href="/geonext/myhome.geo">Organizer  Home</a> 
         </li> 
        </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

https://jsfiddle.net/ka6me6p0/