Question

我一直在使用this示例为我的对象构建树。如您所见，它基于构建树的嵌套ul模型：

<ul class="tree">
    <li>
        Animals
        <ul>
            <li>Birds</li>
            <li>
                Mammals
                <ul>
                    <li>Elephant</li>
                    <li>Mouse</li>
                </ul>
            </li>
            <li>Reptiles</li>
        </ul>
    </li>

我一直在尝试添加折叠树的功能。例如，如果我点击Mammals，则会隐藏Elephant和Mouse，仅限于“树”类中。

我试过用这个：

$('li').on('click', function() {
    $(this).closest('ul').nextAll('.hidden:first').toggle();
});

并添加隐藏类作为display none，但是，当我点击任何li时，似乎没有切换该函数。

我做错了什么？

Answer 1

你需要这个，

$('li').on('click', function(e) {
  e.stopPropagation();
  $(this).find('ul').slideToggle();
});

Fiddle

使用.find()方法查找子元素。

然后使用slideToggle()切换动画效果

注意：您需要使用event.stopPropagation（）来阻止事件传播到父li

Answer 2

这里有fiddle

您只需要停止点击事件传播，因此它不会遍历所有项目。并切换您单击的li项目的子项：

$('.tree li').on('click', function(e) {
    $(this).children().toggle();
    e.stopPropagation();
});

如何使用jQuery在HTML中切换隐藏/显示最接近的UL？

2 个答案: