在li中切换下一个ul

问题描述

当我单击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的子元素，则可以使用 siblings :

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！