0

ツリービューを表示する角度ディレクティブがあります。li アイコンをクリックすると、ネストされた UL が非表示になるはずです。

重要なコードは次のとおりです: (これは e がクリックイベントであるクリック関数にあります)

$toggler=$(e.target).closest('li');
if($toggler.hasClass("collapsed")){
 $toggler.removeClass("collapsed").addClass("expanded");
} else {
  $toggler.removeClass("expanded").addClass("collapsed");
}
$(".collapsed").find("ul").hide();
$(".expanded").find("ul").show();

デバッガーで、クラスが適切に割り当てられ、削除されていることを確認できます。ただし、最初にクラスを折りたたみとして設定した LI の最初のセットでのみ機能します。ツリーのより深いレベルはクラスの変更を示していますが、セレクターはそれらで機能しません。興味深いことに、より深い行をクリックすると、最初にルート行をクリックしたように動作します。その後は何もしません。

質問: セレクターが機能しないのはなぜですか?

ここに私の plunkr があります: http://plnkr.co/edit/GZ5MZjkir4AaNQmHIxFP?p=preview

4

1 に答える 1

1

問題は、最初に申請.collapsedしてから.expanded. したがって、ルートが展開されている場合、子は常に展開されます。それらを交換すると、意図したとおりに機能します。

$(".expanded").find("ul").show();
$(".collapsed").find("ul").hide();

したがって、最初にすべての子を展開します。次に、最初の子に到達し、それ.collapsedを折りたたみます。この後も子供たちは倒れ続け.collapsed、視覚的な違いはありません。

于 2013-10-27T22:19:17.577 に答える