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

【问题标题】：How to select a child ul and not the parent ul?如何选择子 ul 而不是父 ul？
【发布时间】：2014-01-29 22:59:41
【问题描述】：

我有一个显示在许多嵌套列表中的信息“树”(ul li ul li ....)。两个问题：

当我单击 <li> 时，父 ul 和子 ul 都被切换。
如果我在没有 ul 的嵌套列表中单击 <li>（例如，下面的 Cranberry 下的蓝色），则父 ul 是切换的，即使这不应该匹配 'li.has( 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>

【问题讨论】：

您可以通过在顶部 UL 上放置一个侦听器来避免所有这些，然后使用事件目标来确定点击的来源。然后，您可以根据需要折叠或展开相关列表。

标签： javascript jquery toggle nested-lists

【解决方案1】：

问题是事件传播，阻止它

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

演示：Fiddle

【讨论】：

啊！谢谢。我有一种预感，这可能是问题所在。我忘了提到我曾尝试添加 e.preventDefault();到 $('li.has(ul)') 行，但这没有用。我想我用错了。
@Graeck preventDefault() 和 stopPropation() 是两个完全不同的函数
当然……抱歉，我在开会时看到这个，读得太快了。 :P

【解决方案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 的那些。原因是如果你不这样做，你就无法停止传播。例如，“Cranberry”下的“Blue”没有列表，因此它不会调用该事件。但是，由于“Blue”实际上是在Cranberry中，它是一个列表项并且确实触发了事件，所以点击Blue也算是点击了Cranberry，所以Cranberry收回了。通过让 Blue 有机会停止传播，它可以防止 Cranberry 错误地崩溃。

停止传播的另一部分是简单地停止父母。我们只希望我们直接点击的元素（首先被触发）而没有其他元素（尝试）切换。

【讨论】：