使用jquery slideToggle單個項目的大列表

我有一個大的嵌套列表，我試圖使用jquery slideToggle進行動畫製作。我希望單獨嵌套列表（id =「嵌套」+計數器）單獨進行動畫製作，以便用戶可以切換列表以顯示/隱藏而不影響其他列表。動畫將由相應的「trigger_Nested」（+ counter）鏈接觸發。使用jquery slideToggle單個項目的大列表

但是，最終會有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>

來源

2010-06-21 Bobby K

可以更改.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只有這一個。

來源

2010-06-21 02:35:38

完美，謝謝！ – 2010-06-21 03:07:54

兩級縮進列表如何？

<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-22 14:57:01

使用jquery slideToggle單個項目的大列表

回答

相關問題