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

リストは多層であり、私が抱えている問題は、第2層の子が複数あり、第2層の子のいずれかをクリックすると、両方の子のアイコンが変わることです。

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

両方のセカンダリアイテムを含むリスト全体のリストスタイルを調整しています。ulレベルではなくliレベルでクラスを変更する必要があります。

  $('.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 に答える