jquery slideDown() Überreiten letzten Elements

Question

Ich versuche, ein Untermenü Dropdown in meinem mobilen Modus zu schieben. Ich kann das letzte Element nicht aus dem Weg schieben. Im Moment erweitert es die beiden Li's über den aktuellen Selektor.

<li class="dropdown"> 
    <a href="#">Solutions</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">ERP</a></li> 
    <li><a href="#">Module</a></li> 
    <li><a href="#">WMS</a></li> 
    <li><a href="#">Sales Tax </a></li> 
    <li class="dropdown hasKids"> 
     <a href="#" class="rd-with-ul">Websites &nbsp;<b class="caret-right"></b><span class="rd-submenu-toggle"></span></a> 
     <ul class="dropdown-menu websiteClasses"> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 
<li><a href="contactUs.html" class="mobileFont">Contact</a></li> 


$(".hasKids").on('click', function(){ 
    $(this).find(">:first-child").toggleClass('active'); 
}) 
$(".hasKids").on('click', function(){ 
    if ($('.hasKids').find(">:first-child").hasClass("active")){ 
    console.log('active'); 
    var submenu = $(".hasKids").find(">:nth-child(2)"); 
    submenu.slideDown(); 
    } else { 
    console.log('not active'); 
} 
}) 

Also ich brauche nur den Drop-Down-hasKids, wenn darauf geklickt wird, die zwei li A und B und drücken Sie den Kontakt aus dem Weg zu Dropdown-Menü. Und wenn hasKids erneut angeklickt wird, wird das Dropdown-Menü wieder eingeblendet. Dank

Answer 1

Bitte überprüfen Sie, ob das ist, was Sie brauchen:

$(".hasKids").on('click', function(){ 
    $(this).children("a").toggleClass('active'); 
    var submenu = $(this).children(".dropdown-menu"); 
    if ($(this).children("a").hasClass("active")){ 
     console.log('active');  
     submenu.slideDown(); 
    } else { 
     console.log('not active'); 
     submenu.slideUp(); 
    } 
}); 

ich die beiden Event-Handler verschmolzen und verändert die eine Bitselektoren auf Klassen und Tags anstelle der Position abhängen (>:first-child und >:nth-child Selektoren) .

Answer 2

Also war ich auch in der Lage, diese Lösung zu finden, aber es braucht ein paar Optimierungen, da ich zwischen Desktop und Mobile hin und her gehe. Ich habe deine Antwort noch nicht versucht, aber ich werde über das Wochenende. Ich werde auf jeden Fall die Kind-Selektoren loswerden ... deine sieht viel sauberer aus. Danke

$(".hasKids").on('click', function(){ 
      console.log($this); 
      var submenu = $(".hasKids").find(">:nth-child(2)"); 
      if ($('.hasKids').find(">:first-child").hasClass("active")){ 
       submenu.removeClass(); 
       submenu.addClass("rd-mobilemenu_submenu"); 
       submenu.stop().slideDown(); 
      } else { 
       submenu.removeClass("rd-mobilemenu_submenu"); 
       submenu.stop().slideUp(); 
       submenu.addClass("dropdown-menu"); 
      } 
     })