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

Question

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

1. 当我点击<li>时，父 ul 和子 ul 都会切换。
2. 如果我点击<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>

Answer 1

问题是事件传播，阻止它

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

演示:Fiddle