Question

我有一个下拉列表和一些代码来执行操作以下拉子项并更改列表图标：完整设置此小提琴：http://jsfiddle.net/Gwbfd/3/

$(document).ready(function(){
 $('.drawer').hide();
  $('.handle').click(function(){
    $(this).siblings().slideToggle('slow');
    $(this).closest('ul').toggleClass('expanded');
    $(this).closest('ul').toggleClass('collapsed');
                               });  
                             });

列表是多层的，我遇到的问题是第二层有多个孩子，当我点击其中一个第二层孩子时，它会改变两个孩子的图标。

Answer 1

您需要直接设置li元素的样式，这需要对代码进行一些修改：

$(document).ready(function(){
   $('.drawer').hide();
   $('li:has(ul)').addClass("collapsed");
   $('.handle').click(function(){
      $(this).siblings().slideToggle('slow');
      $(this).closest('li').toggleClass('expanded');
      $(this).closest('li').toggleClass('collapsed');
  });
});

并在CSS中：

li.expanded{
list-style: outside url('http://www.theparisreview.org/images/expand-icon.png') none;
    margin-left: 30px;
}

li.collapsed{
    list-style: outside url('http://www.theparisreview.org/images/collapse-icon.png') none;
    margin-left: 30px;
}

演示：http://jsfiddle.net/Gwbfd/8/

Answer 2

您正在调整包含两个辅助项的整个列表的列表样式。您需要在li级别而不是ul级别更改类。

  $('.handle').click(function(){
    var $this = $(this);
    $this.siblings().slideToggle('slow');
    $this.closest('li').toggleClass('expanded');
    $this.closest('li').toggleClass('collapsed');
                               });  
                             });

这不是一个完美的解决方案，但显示了一个有点工作的版本。我刚刚将ul更改为li并更新了html。

http://jsfiddle.net/Gwbfd/5/

jQuery列表图标更改

2 个答案: