Demo

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>

我在节点前添加了+/-图标。这个结构的CSS

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

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

在click事件中，我想使用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而不是this。 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();
});

在嵌套列表中切换类

3 个答案:

Demo