如何使用 jQuery 折叠嵌套列表？

【问题标题】：How can I collapse a nested list using jQuery?如何使用 jQuery 折叠嵌套列表？
【发布时间】：2023-03-14 22:14:01
【问题描述】：

我有一个嵌套列表：

<ul>
  <li><a href='#'>stuff</a></li>
  <li><a href='#'>stuff2</a></li>
    <ul>
      <li><a href='#'>stuff3</a></li>
    </ul>
  <li><a href='#'>stuff4</a></li>
</ul>

...并希望在单击 li 时折叠嵌套的 ul。在我使用之前

$('UL LI').click(function(){
  $(this).next().slideToggle();
});

...但是当 li 后面没有嵌套 ul 时，这显然会导致问题。有没有更好的方法来做到这一点，或者有没有办法让我确定 $(this).next() 返回的对象是否是 UL？

【问题讨论】：

标签： jquery

【解决方案1】：

if($(this).next().is("ul")) {

}

应该做的伎俩。见：http://api.jquery.com/is/

【讨论】：

太棒了！谢谢...我知道这很简单，但显然我使用的快速参考指南没有列出 .is() 方法。
这是同级检查。如果 UL 是 LI 的子级或父级，它将看不到它。在您发布的情况下，UL 没有 LI 兄弟。

【解决方案2】：

$('LI').toggle(function() {
    $(this).children('ul').slideUp();
},
function() {
    $(this).children('ul').slideDown();
});

这是假设您指的是被点击的 LI 下列出的 UL。如果您希望在单击 any LI 时使特定 UL 折叠，您可能需要编写一些带有更多检查的内容。

【讨论】：

这只是将我的整个列表设置为隐藏，我再也看不到顶级
了。

【解决方案3】：

可以只是 $(this).next("ul").slideUp()

【讨论】：

【解决方案4】：

有点晚了，但是……

$('UL LI').click(function() {
  $('> ul', this).toggle();
});

【讨论】：