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

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，仅在类“tree”中。

我试过用这个:

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

并添加了隐藏类作为不显示，但是，当我点击任何 li 时，该功能似乎没有切换。

我做错了什么？

Answer 1

你需要这个，

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

Fiddle

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

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

注意:您需要使用 event.stopPropagation() 来防止事件传播到父 li