切換類嵌套表

Question

我已經把下面的結構

<ul id="Budor"> 
    <li class="L-1">First 
    <ul> 
     <li class="L-2">First Child 
      <ul> 
       <li>abc</li> 
       <li>xyz</li> 
      </ul> 
     </li> 
     <li class="L-2">Second Child 
      <ul> 
       <li>pqr</li> 
       <li>dfg</li> 
      </ul> 
     </li> 

我在節點前添加+/-圖標。對於這種結構

.handle { 
    background: transparent url(/images/openedclosed.png) no-repeat left top; 
} 

.closed { background-position: left top; } 
.opened { background-position: left -5px; } 

在Click事件的CSS，我想用一個toggleClass至+之間切換 - 這取決於展開/摺疊狀態

$('#Budor li').on('click', function (e) { 
     $(this).children('ul').slideToggle().toggleClass('handle closed', 'handle opened'); 
    }); 

但是這是行不通的。我究竟做錯了什麼？

[額外信息]：每個有節點的家長和子女名單都可以打開，並且有擴展名（+）。當用戶單擊以展開節點時，（+）應更改爲（ - ）。當再次點擊該節點時，它會摺疊並將（ - ）更改爲（+）。

Answer 1

我不確定你想標記爲關閉/打開的列表是什麼，但它是類似於this？

$('#Budor li').on('click', function (e){ 
    $("#Budor>li>ul").toggleClass('closed'); 
    $("#Budor>li>ul").toggleClass('opened'); 
    }); 

Answer 2

你可以試試這個：

$('#Budor li').on('click', function (e){ 
    e.stopPropagation(); 
    $(this).children("ul").toggleClass('closed').toggleClass('opened'); 
    }); 

Demo

Answer 3

您需要在您的JS代碼e.target，而不是這個使用。 Here正在工作小提琴。以下是e.target之外的一些其他更改的代碼：

$('li').on('click', function (e) { 
     if ($(e.target).children('ul').is(':visible')) { 
      $(e.target).children('ul').slideToggle().toggleClass('closed'); 
     } 
     else 
      $(e.target).children('ul').slideToggle().toggleClass('opened'); 
     e.stopPropagation(); 
});