我想通过点击父列表项来切换单个子项的可见性。
我有这样的文件树:
<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();
}
});
问题是如果我点击任何地方,所有父列表项都会受到影响。你能告诉我如何一次只切换一个项目吗?
答案 0 :(得分:2)
DEMO - 添加e.stopPropagation();
会阻止事件传播到嵌套元素。
答案 1 :(得分:2)
内部列表项中的Stop the propagation次点击。
$("li").on("click", function( event ) {
event.stopPropagation();
// rest of your logic here
});
当您单击嵌套列表项时,click事件将不会沿祖先树向上移动。