Question

我有一个大的嵌套列表，我试图使用jquery slideToggle进行动画制作。我希望单独的嵌套列表（id =“嵌套”+计数器）单独设置动画，以便用户可以切换列表以显示/隐藏而不影响其他列表。动画将由相应的“trigger_Nested”（+计数器）链接触发。

但是，最终会有大约75个左右的嵌套列表，我不想单独列出每对锚点和列表。

我觉得有一种非常简单的方法可以使用计数器动态地执行此操作，但我是一个Javascript新手，所以无法弄明白。我在下面的js同时切换所有列表，这不是我想要的。

感谢任何帮助，谢谢！

<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

   $(document).ready(function(){

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

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

</script>
</head>

<body>

<ul id='TopLevel-List'>

   <li><a href=# id='trigger_Nested-0'>Top Level 1</a>

   <ul id='Nested-0' >
      <li><a href=#>Item 1</li>
      <li><a href=#>Item 2</li>
   </ul>
   </li>

   <li><a href=# id='trigger_Nested-1'>Top Level 2</a>

   <ul id='Nested-1'>
      <li><a href=#>Item 3</a></li>
      <li><a href=#>Item 4</a></li>
      <li><a href=#>Item 5</a></li>
   </ul>
   </li>

</ul>

</body>

Answer 1

您可以在.click()处理程序中更改选择器以使用this并找到相对<ul>，如下所示：

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

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

You can view a quick demo here，这来自您点击的元素（然后是<a>）并找到与选择器匹配的.siblings()（本例中为<ul>）和slideToggle的只有那一个。

Answer 2

两级缩进列表怎么样？

<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>

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

2 个答案: