1

我想在单击 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>

谢谢

4

3 回答 3

3

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

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

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

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

$('.expand').click(function() {
    $(this).siblings('ul').slideToggle('slow');
});
于 2012-06-28T13:24:56.247 回答
0

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

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

如果您正在调整它以与多个组一起使用，您是否考虑过给 a 一个匹配它的 ul 选择器的属性？

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

这样，如果 DOM 的排列发生变化，您的代码仍然可以工作。

于 2012-06-28T13:26:36.397 回答
0

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

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

<UL>旁边没有<A>！

工作小提琴

于 2012-06-28T13:27:52.703 回答