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方法将在兄弟之后立即返回，如果它与选择器匹配。在你的情况下，那就是＆＃34;删除＆＃34;链接，不匹配。

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

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

Answer 2

你也可以通过它的ID来定位ul：

$('a.expand').on('click',function(e){
    $('ul#0').slideToggle('slow');
 });

如果你正在调整它以适应多个群组，你是否考虑过给一个与它的ul选择器匹配的属性？

$('a.expand').on('click',function(e){
    e.preventDefault();
    var id = $(this).attr('href');
    $('ul#'+id).slideToggle('slow');
 });

这样，如果DOM的排列发生变化，您的代码仍然有效。

Answer 3

只需在此处替换您的代码：

$(document).ready(function(){
    $('.expand').click(function() {
        $(this.parentNode).children('ul').slideToggle('slow');
    });
});

<UL>旁边没有<A>！

<强> Working fiddle

切换li中的下一个ul

3 个答案: