jquery - 切换 li 中的下一个 ul

Question

我想在点击 group1 或 group2 时切换 ul

HTML

<li class="sort">
  <span></span>
  <a class='expand'>Group1</a>
  <a style='padding-right:10px; float:right' href='#'>Delete</a>
  <a style='padding-right:10px; float:right' href='#'>Edit</a>
  <ul id="0" style='display:none'>
    <li style='border:none' id="1" class='sort'>
        <span></span>
        <a href='#'>Patent 1</a>
        <em style='padding-left: 60px;'>The description of patent 1</em>
        <a style='padding-right:10px; float:right' href='#'>Delete</a>
        <a style='padding-right:10px; float:right' href='#'>Edit</a>
    </li>
    <li style='border:none' id="2" class='sort'>
        <span></span>
        <a href='#'>Patent 2</a>
        <em style='padding-left: 60px;'>The description of patent 2</em>
        <a style='padding-right:10px; float:right' href='#'>Delete</a>
        <a style='padding-right:10px; float:right' href='#'>Edit</a>
    </li>
  </ul>
</li>

我试过了

 <script>
  $(document).ready(function(){
    $('.expand').click(function() {
        $(this).next('ul').slideToggle('slow');
    });
});
</script>

谢谢

Answer 1

您可以使用nextAll然后将匹配的集合减少到第一个元素 eq :

$('.expand').click(function() {
    $(this).nextAll('ul').eq(0).slideToggle('slow');
});

next 方法将返回紧随其后的同级(如果它与选择器匹配)。在您的情况下，这是“删除”链接，该链接不匹配。

如果始终只有一个 ul 元素作为 li 的子元素，则可以使用 siblings :

$('.expand').click(function() {
    $(this).siblings('ul').slideToggle('slow');
});