jquery選擇器切換點擊隱藏/顯示子元素

Question

我有以下列表元素。

<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> 

我已經添加下面的事件處理 如果我點擊「科1-1」我想第二個層次有一個紅色邊框。

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

目前第二個和第一個級別被改爲紅色邊框。

Result after click

它看起來好像「這個」適用於父UL的所有元素，而不僅僅是孩子UL被點擊。

這個想法是切換所有子元素的顯示。 所以如果用戶點擊分支1-1，用戶1-1-x必須切換顯示。如果用戶點擊公司1，則分部1-1及其子元素必須切換顯示。被點擊的選項必須保持可見，以便用戶可以再次鎖定。

有什麼建議嗎？

Answer 1

你需要停止事件傳播：

[e.stopPropagation();][1] 

冒泡DOM樹，阻止任何父處理程序被通知的事件阻止事件。

最好的解決方案是基於類而不是使用內聯樣式。

因此，如果您需要切換，您可以使用toggleClass()而不是css()。這意味着您需要定義一個類而不是使用內聯類字符串。這將避免將諸如紅色的屬性轉換爲等效的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>