我尝试在 here 中使用没有插件的 javascript 制作一棵简单的树
这是我的html
<ul class="tree">
<li>First Child
<ul>
<li>First Child
<ul>
<li>First Child</li>
<li>Second Child</li>
<li>Third Child</li>
<li>Fourth Child</li>
</ul>
</li>
<li>Second Child</li>
<li>Third Child</li>
<li>Fourth Child</li>
</ul>
</li>
<li>Second Child</li>
<li>Third Child</li>
<li>Fourth Child</li>
</ul>
和我的js
$( "li" ).on( "click", function() {
if ($(this).children('ul').css('display') == 'none') {
$(this).children('ul').css("display", "");
} else {
//alert( $( this ).text() );
$(this).children('ul').css("display", "none");
}
});
但它只适用于第一级。怎么做,谢谢。
最佳答案
事件冒泡正在那里发生。使用 e.stopPropagation()
来阻止它。顺便说一句,您不需要更改/检查显示属性来使任何元素可见/隐藏,只需使用
.toggle()
.
尝试,
$("li").on("click", function (e) {
e.stopPropagation();
$(this).children('ul').toggle();
});
DEMO
关于javascript - 使用没有插件的 ul li 和 javascript 的树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22731227/