Question

我有一个'树'信息显示在许多嵌套列表中（ul li ul li ....）。两个问题：

当我点击<li>时，父级ul以及孩子都会被切换。
如果我点击嵌套列表中没有ul的<li>（比如下面的Cranberry下的Blue），则父级ul会切换，即使这不应该与'li匹配。具有（UL）”。

我尝试了各种JQuery选择器，next（ul），children（）。first（）等，结果相同。没有运气 - 虽然我确定我只是在这里错过了一些简单的东西。

$('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>

Answer 1

问题是事件传播，阻止它

$('li:has(ul)').click(function (e) {
    $(this).children('ul').addClass('thisOne').toggle();
});
$('li').click(function (e) {
    e.stopPropagation();
});

演示：Fiddle

Answer 2

一切都与传播有关。

这是有效的JavaScript：

$('li').click(function(e) {
    if ($(this).has('ul')) {
        $(this).children('ul').addClass('thisOne').toggle();
    }

    e.stopPropagation();
});

JSFiddle：http://jsfiddle.net/zkFGU/3/

基本上，首先，您希望在所有列表项上使用此事件，而不仅仅是具有ul的列表项。原因是因为如果你不这样做，你就无法阻止传播。例如，“蔓越莓”下的“蓝色”没有列表，因此它不会调用该事件。但是，因为“Blue”实际上是Cranberry，它是一个列表项并且确实触发了该事件，所以单击Blue计算为单击Cranberry，因此Cranberry缩回。通过让Blue改变机会来阻止传播，它可以防止Cranberry错误地崩溃。

阻止传播的另一部分就是阻止父母。我们只想要直接点击的元素（首先被触发）而没有其他元素（尝试）切换。

如何选择子ul而不是父ul？

2 个答案: