jQuery 列表图标更改

Question

我有一个下拉列表和一些代码来执行下拉子项的操作并更改列表图标:此 fiddle 的完整设置: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/