jquery selectorはクリック時にトグルします。子要素を非表示/表示します

Question

私は以下のリスト要素を持っています。私は「支店1-1」をクリックすると、私は、次のイベントハンドラ を追加した

<div id="selections"> 
<ul> 
    <li><img class="closeArrow">Company 1 
     <ul class="collapse"> 
      <li><img class="closeArrow">Branch 1-1 
       <ul class="collapse"> 
        <li>User 1-1-1</li> 
        <li>User 1-1-2</li> 
        <li>User 1-1-3</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
</div> 

は、私は2番目のレベルは赤い枠を持っていると思います。

$(document).on('click', '#selections ul > li:has(img)',function(e){ 
     $(this).css("border","red thin solid"); 
} 

現在、2番目と1番目のレベルは赤い境界線に変更されています。

Result after click

「これは」親UL内のすべての要素に適用され、クリックされた子ULないだけかのように表示されます。

アイデアは、すべての子要素の表示を切り替えることです。 ユーザが支店1-1をクリックすると、ユーザ1-1-xは表示を切り替える必要があります。ユーザーが会社1をクリックすると、支店1-1とその子要素が表示を切り替える必要があります。クリックされたオプションは、ユーザが再度クリックできるように視覚可能なままでなければなりません。

アドバイスはありますか？あなたはイベントの伝播を停止する必要が

Answer 1

：

[e.stopPropagation();][1] 

は、イベントが通知されてから任意の親ハンドラを防止し、DOMツリーをバブルアップからのイベントを防ぎます。

最適な解決策は、インラインスタイルを使用する代わりにクラスに基づいています。

したがって、トグルする必要がある場合はcss()の代わりにtoggleClass()を使用してください。つまり、インラインクラスの文字列を使用する代わりに、クラスを定義する必要があります。これにより、赤色のような属性を同等のrgb値に変換する複雑さが回避されます。

スニペット：魔法のように

$(document).on('click', '#selections ul > li:has(img)',function(e) { 
 
    e.stopPropagation(); 
 
    $(this).toggleClass('newBorder'); 
 
});

.newBorder { 
 
    border: red thin solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<div id="selections"> 
 
    <ul> 
 
     <li><img class="closeArrow">Company 1 
 
      <ul class="collapse"> 
 
       <li><img class="closeArrow">Branch 1-1 
 
        <ul class="collapse"> 
 
         <li>User 1-1-1</li> 
 
         <li>User 1-1-2</li> 
 
         <li>User 1-1-3</li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>