使用 sub class 切换列表

Question

切换不适用于子 class (.open)，它适用于主标签 (li)。

$('.open').click(function() {
    $(this).next('ul').toggle();
});

我错过了什么吗？

jsfiddle

Answer 1

Updated fiddle

jQuery方法next()获取紧随其后的兄弟。

问题：您的 .open 元素没有 ul 兄弟。

建议的解决方案： 转到父级 li，然后使用 .next() 以 ul 兄弟为目标，例如：

$(this).parent().next('ul').toggle();
//Or
$(this).parents('li').next('ul').toggle();

希望这对您有所帮助。

$('.open').click(function() {
   $(this).parent().next('ul').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> 11111111 <i class="open">open</i></li>
  <ul>
    <li> 1.1 </li>
    <li> 1.2 </li>
  </ul>
  <li> 22222222222 <i class="open">open</i></li>
  <ul>
    <li> 2.1 </li>
    <li> 2.2 </li>
  </ul>
</ul>

Answer 2

使用 .closest() 获取最近元素 li .next() 获取 select 直接 ul 元素 dom

$('.open').click(function() {
    $(this).closest('li').next('ul').toggle();
});

Fiddle

Answer 3

获取 .open 的父 li 元素，然后获取该父项的下一个 li 元素。

$('.open').click(function() {
    $(this).parent('li').next('ul').toggle();
});

Answer 4

当你放置 $(this).next('ul').toggle(); 时，它指向 .open 对象所在的 <li> 内的下一个 ul，但那里没有 <ul>。

为此，您应该使用父级 <li> 为目标，然后将其后的下一个 <ul> 作为目标。

代码应该是这样的：

$('.open').click(function() {
    $(this).parent().next('ul').toggle();
});

使用 sub class 切换列表

Toggle list using sub class

jquery

toggle