javascript - 带有更多节点的简单 jQuery 树问题

Question

这是我的例子。

$(function() {
    $('li > ul').each(function() {
        var parent_li = $(this).parent('li');
        var sub_ul = $(this).remove();
        parent_li.click(function() {
            sub_ul.toggle();
        });
        parent_li.append(sub_ul);
    });
    $('ul ul').hide();
});

如果你想打开第三个节点，你会注意到这个问题。因为它会在每次点击时切换所有内容，所以我尝试使用某种检查它是否有父级来仅隐藏子级等，但它根本不起作用......

欢迎任何建议。

Answer 1

这应该有效：

$(window).load(function() {
    $('li').click(function(evt) {                   
        $(this).children('ul').toggle();
        evt.stopPropagation(); //Stop bubbling upwards, so our parent doesnt recieve this click!
    });
});

每当您单击 LI 时，您都想切换子项。问题是事件冒泡，您的点击是在最里面的元素上触发的，但随后会冒泡到父元素。正如预期的那样，它关闭了元素。

这就是为什么我们在冒泡到达那里之前停止冒泡，所以父母不会得到点击，我们保持开放。