Schwebende Verzögerung dritten Grades im Boostrap-Menü

Question

Ich habe ein Hover-Menü mit drei Ebenen, das aktiviert wird, wenn ich über CSS schwebe. Ich möchte eine leichte Verzögerung ein- und ausblenden, wenn das Menü angezeigt wird. Ich habe jedoch Schwierigkeiten, herauszufinden, wie das auf der letzten Menüebene funktioniert.

Die erste Ebene funktioniert mit einer leichten Verzögerung, aber es scheint keine Verzögerung beim Öffnen der dritten Ebene von der übergeordneten Ebene zu passieren.

Hier ist mein Jquery-Code.

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

Ich denke, es hat etwas mit meinem CSS zu tun hat, nicht die JQuery selbst.

Answer 1

Es hat sowohl mit Jquery und CSS zu tun.

Auf dem Schweben des ersten Elements u die erste Dropdown-Liste findet auch nur wollen, sonst sind beide verblassen parallel

$('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(); 
}); 

In CSS Untermenü Anzeige einstellen soll:

.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; 
} 

keine

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/