ランダムなjqueryの切り替えを禁止するにはどうすればよいですか？

Question

私はモバイルナビゲーションに使用しているリスト項目があります。それは次のようになります。

<div id="menu"> 
    <ul> 
    <li class="menu-item"><a href="#">Menu item 1</a></li> 
    <li class="menu-item"><a href="#">Menu item 2</a></li> 
    <li class="menu-item"><a href="#">Menu item 3</a> 
     <div id="submenu-wrap"> 
     <ul class="submenu"> 
      <li class="submenu-item"><a href="#">SubMenu item 1</a></li> 
      <li class="submenu-item"><a href="#">SubMenu item 2</a></li> 
     </ul> 
     </div> 
    </li> 
    <li class="menu-item"><a href="#">Menu item 4</a></li> 
    <li class="menu-item"><a href="#">Menu item 5</a></li> 
    <li class="menu-item"><a href="#">Menu item 6</a> 
     <div id="submenu-wrap"> 
     <ul class="submenu"> 
      <li class="submenu-item"><a href="#">SubMenu item 3</a></li> 
      <li class="submenu-item"><a href="#">SubMenu item 4</a></li> 
     </ul> 
     </div>  
    </li>  
    </ul> 
</div> 

私はサブメニュー（UL）隠さを持っているだけjqueryのトグルトリガーがクリックされたときに表示されます。 ！ ＃サブメニューラップ{ 位置：

$('#submenu-wrap').on('click',function(){ 
    $('.submenu').slideToggle(); 
});  

ここに私のCSSは次のようになります。ここでは

は私のjqueryのは次のようになります。相対的な重要。 }

#submenu-wrap:after { 
    font-family: FontAwesome; 
    font-size: 18px; 
    color: #555555; 
    cursor: pointer; 
    content: "\f078"; 
    position: absolute; 
    right: 5px; 
    top: -30px; 
    z-index: 99; 
} 

私はサブメニューを切り替えるには、サブメニュー（＃サブメニュー-ラップ）ラップのdivを使用しています。 これは完璧に機能します。

私が抱えている問題は、トリガーをクリックすると、すべての非表示サブメニュー（ul）が開きます。次のサブメニューだけを開くようにします。つまり、ラップするサブメニューだけを開きます。各トリガーはそれぞれのサブメニューを開く必要があります。

私は実際にここでいくつかの助けを使用することができます...

ありがとうございます。

Answer 1

前述のdm295のように、idの値は一意である必要があります。 submenu-wrapは、idの代わりにclassにする必要があります。あなたがクリックされた要素の子である.submenuの要素を検索する必要がありますように変化し、それが聞こえることを考えると

：

$('.submenu-wrap').on('click',function(){ 
    $(this).find('.submenu').slideToggle(); 
});