4

我有一个大型嵌套列表，我正在尝试使用 jquery slideToggle 对其进行动画处理。我希望各个嵌套列表（id="Nested" + counter）单独设置动画，以便用户可以切换列表以显示/隐藏而不影响其他列表。动画将由相应的“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>
4

2 回答 2

1

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

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

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

您可以在此处查看快速演示，这来自您单击的元素（然后<a>）并发现它.siblings()与选择器匹配（<ul>在本例中为 ），而 slideToggle 只是那个。

于 2010-06-21T02:35:38.287 回答
0

两级缩进列表怎么样？

<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>
于 2011-12-22T14:57:01.573 回答