jQuery関数を使用して子どもを制限する

Question

私は特定のコーディング言語に対して非常に新しく、私は自分自身を教えようとしています。私は通常、いくつかの研究の後で私の問題を解決することができますが、私は本当に立ち往生しています。私はjqueryで構築されたサブメニューを備えた反応的なnavシステムを持っていますが、応答ビューではサブメニューのボタンだけがサブセクションを展開します。

既存のコード：

cssmenu.find('li ul').parent().addClass('has-sub'); 

multiTg = function() { 
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      cssmenu.find('.submenu-button').on('click', function() { 
      $(this).toggleClass('submenu-opened'); 
      if ($(this).siblings('ul').hasClass('open')) { 
       $(this).siblings('ul').removeClass('open').hide(); 
      } 
      else { 
       $(this).siblings('ul').addClass('open').show(); 
      } 
      }); 
     }; 

私はそれを少しを果たしたが、私は、以下の変更を行った際に、開口部/サブメニューを閉じると、親メニューを閉じます。

cssmenu.find('li ul').parent().addClass('has-sub'); 

multiTg = function() { 
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      cssmenu.find('.submenu-button').parent().on('click', function() { 
      $(this).children('.submenu-button').toggleClass('submenu-opened'); 
      if ($(this).children('ul').hasClass('open')) { 
       $(this).children('ul').removeClass('open').hide(); 
      } 
      else { 
       $(this).children('ul').addClass('open').show(); 
      } 
      }); 
     }; 

私は私の質問は、私はトグル機能によって呼び出された子要素を限定しない方法であると思いますか？または、私はこれをすべて完全に台無しにしましたか？どんな助けや正しい方向への私の指しても驚くほど役に立ちます！ありがとう！

PS、NAVのためのHTML：

<div id="cssmenu" class="align-right mobile-align-center"> 
<ul> 
    <li><a href="link">Home</a></li> 

    <li><a href="#">About</a> 
     <ul> 
     <li><a href="#">About The Org</a></li> 
     <li><a href="link">Leadership</a></li> 
     <li><a href="link">FAQs</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Divisions</a> 
     <ul> 
     <li><a href="#">Division 1</a> 
     <ul> 
     <li><a href="link">D1, Branch 1</a></li> 
     <li><a href="link">D1, Branch 2</a></li> 
     <li><a href="link">D1, Branch 3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Division 2</a> 
     <ul> 
     <li><a href="link">D2, Branch 1</a></li> 
     <li><a href="link">D2, Branch 2</a></li> 
     </ul> 
     </li> 
     </ul> 
    </li> 

    <li><a href="link">Contact</a></li> 
</ul> 
</div> 

Answer 1

はあなたの第二のコードは、クリックは、このように親メニュー項目をクリックをトリガー、上向きに伝播していることを除いて、ほとんどがあります。

console.logを使用することをお勧めします。行動利用のstopPropagation（）を停止するにはhttps://jsfiddle.net/7r729q5r/2/

：あなたは子供のクリックがコンソールで2つのメッセージをトリガーすることがわかります。また

https://jsfiddle.net/7r729q5r/3/にライン36の周りを参照してください

cssmenu.find('.submenu-button').parent().on('click', function(event) { 
     event.stopPropagation(); 

を、 cssに230行目のバグがあります。このバグは、特定の幅でメニューが消える原因となります。