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

我有一个信息“树”，它显示在许多嵌套列表中（ulli ulli…）。两个问题：

当我单击一个

时，父ul和子ul都被切换

如果我在嵌套列表中单击一个没有ul的

（例如，下面的蔓越莓下面的蓝色），则父ul将切换，即使这不应与“li.has（ul）”匹配

我尝试了各种JQuery选择器，next（ul），children（）.first（）等等，结果都是一样的。不走运——虽然我肯定我错过了一些简单的东西

开

以及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();
});

---

演示：

这一切都是关于传播的

以下是工作JavaScript：

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

    e.stopPropagation();
});

JSFiddle：

基本上，首先您希望所有列表项上都有此事件，而不仅仅是那些具有ul的项目。原因是如果你不这样做，你就无法停止传播。例如，“蔓越莓”下的“蓝色”没有列表，因此它不会调用该事件。但是，因为“蓝色”实际上在Cranberry中，它是一个列表项，并且确实触发了事件，所以单击蓝色将被视为单击Cranberry，因此Cranberry将收回。通过给蓝色一个停止繁殖的机会，它可以防止蔓越莓错误地倒下

---

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

Ah！谢谢我有预感这可能就是问题所在。我忘了提到我曾试图添加e.preventDefault（）；到$（'li.has（ul）'）行，但这不起作用。我想我用错了。@Graeck

preventDefault（）

和

stopPropation（）

当然是两个完全不同的函数。。。抱歉，我在会议上看到了这个，读得太快了PYou可以通过将一个侦听器放在最上面的UL上，然后使用事件目标找出单击的来源，从而避免所有这些。然后可以根据需要折叠或展开相关列表。

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

    e.stopPropagation();
});