在大型單個項目列表上使用Jquery slideToggle

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;
  });
});

你可以在這里查看一個快速演示，這來自你點擊的元素（然后是<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 個解決方案

解決方案1
1 已采納 2010-06-21 02:35:38

解決方案2
0 2011-12-22 14:57:01

在大型單個項目列表上使用Jquery slideToggle

問題描述

2 個解決方案

解決方案1 1 已采納 2010-06-21 02:35:38

解決方案2 0 2011-12-22 14:57:01

解決方案1
1 已采納 2010-06-21 02:35:38

解決方案2
0 2011-12-22 14:57:01