はなぜ異なる

Question

結果は、私がとき

function intDropDownMobile() { 
    $('.menu-item-has-children').click(function() { 
     // e.preventDefault(); 
     var subMenus = $(this).siblings(); 
     var subMenuItems = $('.menu-mobile .sub-menu'); 

     $(this).children('.menu-mobile .sub-menu').slideToggle(300); 
     if (subMenus.children('.menu-mobile .sub-menu').is(':visible')); { 
      subMenus.children('.menu-mobile .sub-menu').hide(300); 
     } 
    }); 
} 

この

// Te submenu 
    function intDropDownMobile() { 
    $('.menu-item-has-children').click(function() { 
     // e.preventDefault(); 
     var subMenus = $(this).siblings(); 
     var subMenuItems = $('.menu-mobile .sub-menu'); 

     $(this).children(subMenuItems).slideToggle(300); 
     if (subMenus.children(subMenuItems).is(':visible')); { 
      subMenus.children(subMenuItems).hide(300); 
     } 
    }); 
} 

人とも異なった結果を得るのですか、なぜ私が思っていたのWordpress

のためのJSを持つ単純なドロップダウンメニューを構築しています2つ目のオプションでは異なる動作をして、すべてのメニューを非表示にして、サブメニュー以外の項目を表示すると、なぜこれが起こるのだろうと不思議に思っていました。

の

おかげ

Answer 1

1. はそのセレクタsub-menuで容疑者に見えるの両方が、おそらくあなたが$(this)の子供をフィルタリングするsubMenuItemsを使用している、2番目の例では.sub-menu（.接頭辞）

2. にする必要がありますが、 subMenuItemsは、私が上で指摘した問題のためにおそらく要素を含まないことになるでしょう。したがって、$(this).children(subMenuItems).にも要素は含まれません。

- EDIT -

これはあなたの最初の例からである：children()機能を使用する場合

var subMenuItems = $('.menu-mobile .sub-menu'); 

    $(this).children('.menu-mobile .sub-menu').slideToggle(300); 

私は論理的に、このセレクタが働くことができるとは思いません。セレクタにはスペースがあるため、結果は2つのレベルの階層（クラスmenu-mobileの要素、およびそれぞれのサブ要素はクラスsub-menu）です。結果は2つのレベルにわたっているので、内側（つまり、外側）が「子」として戻る関数にはあいまいです。だから誰も返されない！

これがあなたの第二の例からである。この例では

var subMenuItems = $('.menu-mobile .sub-menu'); 

    $(this).children(subMenuItems).slideToggle(300); 

、subMenuItems内のすべての要素は、クラスsub-menuを持つことになります。それらのうちのいくつかは$(this)の子であり、それらが返されます。

したがって、2番目の例では、文書内の$('.menu-mobile .sub-menu')に一致するすべての要素を選択し、$(this)の子にフィルタリングしました。しかし、最初は、決してうまくいかないセレクターを与えました。