jQueryのslideDown（）オーバー乗って最後の要素

Question

私は私のモバイルモードでサブメニューのドロップダウンメニューをスライドしようとしています。私は途中で最後の要素を押しのけるように見えることはできません。現在、現在のセレクタの上に2つのliを拡張しています。

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

クリックしたときにだから私はちょうど2個のLiのAとBをドロップダウンし、邪魔にお問い合わせをプッシュし、ドロップダウンhasKidsを必要としています。また、hasKidsが再びクリックされると、ドロップダウンが元に戻ります。おかげ

Answer 1

これは何が必要であるかどうかを確認してください：

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

は、私は2つのイベントハンドラをマージして、セレクタのクラス、代わりに位置のタグに依存するビットを変更（ >:first-childと >:nth-childセレクタを使用） 。

Answer 2

だから私は同様に、この解決策を考え出すことができましたが、私は、デスクトップとモバイルの間で前後に行くように、それはいくつかの調整を必要とします。私はまだあなたの答えを試みていないが、私は週末になります。私は間違いなく、子セレクタを取り除くつもりです...あなたは非常にクリーン探しています。ありがとう

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