3

我有一个下拉列表和一些代码来执行操作以下拉孩子并更改列表图标：此小提琴上的完整设置：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');
                               });  
                             });

该列表是多层的，我遇到的问题是第二层有多个孩子，当我单击第二层孩子之一时，它会更改两个孩子的图标。

4

2 回答 2

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/

于 2013-01-29T21:10:58.027 回答
0

您正在调整包含两个次要项目的整个列表的列表样式。您需要在 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/

于 2013-01-29T20:59:36.373 回答