1

親リストアイテムをクリックして、単一のサブアイテムの表示を切り替えたい。

私はこのようなファイルツリーを持っています：

<div id="browser">
  <ul><li class='folder'>Musik
      <ul><li class='folder'>Alben
        <ul><li class='folder'>100JahreEAV
          <ul>
            <li class='file'>000_erste_allgemeine_verunsicherung_-_100_jahre_eav-backcover.jpg</li>
          <li class='file'>000_erste_allgemeine_verunsicherung_-_100_jahre_eav-frontcover.jpg</li>
          <li class='file'>101_alles_gute_eav.mp3</li><li class='file'>102_popstar.mp3</li>
          <li class='file'>103_samurai.mp3</li><li class='file'>104_kuess_die_hand_schoene_frau.mp3</li>
          <li class='file'>105_coconut_island.mp3</li><li class='file'>106_johnny_i_fahrscheine.mp3</li>
        </ul>
      </li></ul>
    </li></ul>
  </li></ul>
</div>

そしてこれはこれまでの私のコードです：

$("div#browser ul li ul").hide();
$("li").click(function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active').children().hide();
    } else {
        $(this).addClass('active').children().show();
    }
});

問題は、どこかをクリックすると、すべての親リストアイテムが影響を受けることです。一度に1つのアイテムだけを切り替える方法を教えてください。

http://jsfiddle.net/g3hWZ/

4

2 に答える 2

2

DEMO —追加e.stopPropagation();すると、イベントがネストされた要素に伝播するのを防ぎます。

于 2012-11-13T01:58:25.973 に答える
2

内部リストアイテムのクリックの伝播を停止します。

$("li").on("click", function( event ) {
    event.stopPropagation();
    // rest of your logic here
});

ネストされたリストアイテムをクリックしても、クリックイベントは祖先ツリーを上に移動しません。

于 2012-11-13T01:58:45.370 に答える