我有一棵信息“树”,显示在许多嵌套列表中(ul li ul li ....)。两个问题:
- 当我点击
<li>
时,父 ul 和子 ul 都会切换。 - 如果我点击
<li>
在其中没有 ul 的嵌套列表中(例如,下面的 Cranberry 下的蓝色),父 ul 是切换的,即使这不应该匹配“li.has(ul)”。
我尝试了各种 JQuery 选择器、next(ul)、children().first() 等,但结果相同。不走运 - 尽管我确信我只是错过了一些简单的东西。
关于JSFiddle .
$('li.has(ul)').click(function() {
$(this).children('ul').toggle();
});
和 html:
<ul class="unstyled" id="full_ontology">
<li>Apple</li>
<li>Banana</li>
<li>Cranberry
<ul>
<li>Blue</li>
<li>Red
<ul>
<li>Round</li>
<li>Square</li>
<li>Circular</li>
</ul>
</li>
<li>Purple</li>
</ul>
</li>
<li>Date</li>
<li>Elderberry
<ul>
<li>Yellow</li>
<li>Pink</li>
<li>Black</li>
</ul>
</li>
<li>Fig</li>
</ul>
最佳答案
问题是事件传播,阻止它
$('li:has(ul)').click(function (e) {
$(this).children('ul').addClass('thisOne').toggle();
});
$('li').click(function (e) {
e.stopPropagation();
});
演示:Fiddle
关于javascript - 如何选择子 ul 而不是父 ul?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21444523/