切换类嵌套表

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(); 
});