jquery - Jquery 独立切换

Question

我有一个带有多个 lis 的 div，每个 li 都包含 ul。我想独立切换每个 li。就像如果我点击一个链接它应该只切换该组的 ul，希望下面的代码比我的话更清楚。

<div id="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
 <li class="ui-state-default"><a href='#' id='expand'> Group 1</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='1' class="ui-state-default">Item 1</li>
        <li id ='2' class="ui-state-default">Item 2</li>
        <li id ='3' class="ui-state-default">Item 3</li>
    </ul>
 </li>
 <li class="ui-state-default"><a href='#' id='expand'> Group 2</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='4' class="ui-state-default">Item 4</li>
        <li id ='5' class="ui-state-default">Item 5</li>
        <li id ='6' class="ui-state-default">Item 6</li>
    </ul>
</li>

脚本是

 <script>
  $(document).ready(function() {
    $('#expand').click(function() {
        $('.patents').toggle('slow', function() {
                    //instead of patents i need something unique 
        });
    });
});
</script>

如果我单击组 1，项目 1、2、3 应该切换，如果我单击组 2，那么项目 4、5、6 应该切换我该如何实现？

谢谢

Answer 1

您应该将 class="expand" 而不是 id="expand" 放在顶层

（你不应该有重复的ID）。

然后使用类选择器“。” 而不是 id "#" 并且只选择 ".patents" 这是被点击元素的子元素

   $(document).ready(function() {
    $('.expand').click(function() {
         $(this).next().toggle('slow', function() {
                    //instead of patents i need something unique
        });
    });
});

Answer 2

基本上，您对 $('.patents') 的调用会获得该类页面上的所有内容。相反，您需要从单击的元素开始。在 click 函数内部， $(this) 引用当前元素。然后，您可以使用 find 方法来定位单击元素的后代。

将 $('.patents') 替换为 $(this).find('.patents')，就可以了。

此外，还有一些小的家务用品：

1. 而不是 id='expand'，您可能应该使用 class='expand'，并将脚本更改为引用 '.expand' 而不是 '#expand'
2. 如果没有封闭 ul 标签，您不应该使用顶级 li 标签。请参阅使用 <li> 而不包含 <ul> 标签是否危险？.

Answer 3

这里：http: //jsfiddle.net/zeS8u/

HTML

<ul>
    <li><a href="#" class="clickme">Click me!</a>
        <ul>
            <li>Cat</li>
            <li>Dog</li>
            <li>Mouse</li>
        </ul>
    </li>

    <li><a href="#" class="clickme">Click me too!</a>
        <ul>
            <li>Zebra</li>
            <li>Lion</li>
            <li>Snow Yeti</li>
        </ul>
    </li>
</ul>​

Javascript：

$("a.clickme").bind("click", function(e) {
   $(this).next("ul").toggle(); 
    return false;
});​

Answer 4

id 属性是唯一的，因此您需要更改为类：

例如：

<li class="ui-state-default"><a href='#' class='expand'> Group 2</a>

然后这样做：

$(document).ready(function() {
  $('.expand').each(function(){
    ($this).click(function() {
      var patents = $(this).next();
      $(patents).toggle(function() {
        $(this).hide();
      },
      function(){
        $(this).show();
      });
  });
});