Javascript 在单个项目的大列表上使用Jquery slideToggle

我有一个很大的嵌套列表，我正在尝试使用jquery slideToggle设置它的动画。我希望各个嵌套列表（id=“nested”+counter）分别设置动画，以便用户可以切换列表以显示/隐藏，而不会影响其他列表。动画将由相应的“触发器嵌套”（+计数器）链接触发

然而，最终会有大约75个嵌套列表，我不想单独列出每一对锚点和列表

我觉得可能有一种非常简单的方法可以使用计数器动态地实现这一点，但我是一个Javascript新手，所以无法理解。下面的js可以同时切换所有列表，这不是我想要的

感谢您的帮助， 谢谢

$（文档）.ready（函数（）{
$（“ul[id |=嵌套]”）.hide（）；
$（[a[id |=触发器嵌套]）。单击（函数（）{
$（“ul[id |=嵌套]”）。滑动切换（“快速”）；
返回false；
});
});

您可以在处理程序中更改选择器以使用

this

并相对地查找

，如下所示：

$(function(){
  $("ul[id|=Nested]").hide();

  $("a[id|=trigger_Nested]").click(function() {
    $(this).siblings("ul").slideToggle("fast");
    return false;
  });
});

---

，这是从您单击的元素开始的（然后是与选择器匹配的

（本例中为
），而slideToggle是唯一的一个元素。
两级缩进列表如何

<ul id="TopLevel-List">
<li><a href=# id="trigger_Nested-0">Top Level 1</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
</ul>




































<ul id="TopLevel-List">
<li><a href=# id="trigger_Nested-0">Top Level 1</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
</ul>