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

时间:2014-01-29 22:59:41

标签: javascript jquery toggle nested-lists

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

  1. 当我点击<li>时,父级ul以及孩子都会被切换。
  2. 如果我点击嵌套列表中没有ul的<li>(比如下面的Cranberry下的Blue),则父级ul会切换,即使这不应该与'li匹配。具有(UL)”。
  3. 我尝试了各种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>
    

2 个答案:

答案 0 :(得分:2)

问题是事件传播,阻止它

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

演示:Fiddle

答案 1 :(得分:0)

一切都与传播有关。

这是有效的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错误地崩溃。

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