在li中切换下一个ul [英] Toggle the next ul in li

问题描述

当我单击group1或group2时，我想切换ul

I want to toggle the ul when I click on group1 or group2

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>

谢谢

推荐答案

您可以使用 nextAll ，然后使用 eq :

You can use nextAll and then reduce the matched set to the first element with eq:

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

如果next方法与选择器匹配，则会返回紧随其后的同级.您的情况就是删除"链接，该链接不匹配.

The next method will return the immediately following sibling, if it matches the selector. In your case, that's the "Delete" link, which does not match.

如果总是只有一个ul元素作为li的子元素，则可以使用

If there is always only going to be one ul element as a child of the li, you can just use siblings:

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

这篇关于在li中切换下一个ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！