與jQuery的HTML可摺疊列表

Question

我想爲我們的博客做一個可摺疊的日期選擇器。我查看了大量的JavaScript/jQuery/css示例，但似乎無法讓它們中的任何一個與3級列表配合使用。 這是我試圖完成佈局：我想做爲的blogspot的博客檔案一樣簡單

<ul class="example_menu"> 
    <li><a class="expanded">Section A</a> 
    <ul> 
     <li><a href="#">Link A-A</a> 
     <ul> 
      <li><a href="#">Link A-A-A</a></li> 
     <li><a href="#">Link A-A-B</a></li> 
    </ul> 
     </li> 
     <li class="active"><a href="#">Link A-B</a></li> 
     <li><a href="#">Link A-C</a></li> 
     <li><a href="#">Link A-D</a></li> 
    </ul> 
    </li> 
    <li class="footer"><span> </span></li> 
    <li><a class="collapsed">Section B</a> 
    <ul> 
     <li><a href="#">Link B-A</a> 
     <ul> 
     <li><a href="#">Link B-A-A</a></li> 
     <li><a href="#">Link B-A-B</a></li> 
     <li><a href="#">Link B-A-C</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Link B-B</a> 
     <ul> 
     <li><a href="#">Link B-B-A</a></li> 
     <li><a href="#">Link B-B-B</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Link B-C</a></li> 
     <li><a href="#">Link B-D</a></li> 
    </ul> 
    </li> 
    <li class="footer"><span> </span></li> 
    <li><a class="collapsed">Section C</a> 
    <ul> 
     <li><a href="#">Link C-A</a></li> 
     <li><a href="#">Link C-B</a></li> 
     <li><a href="#">Link C-C</a></li> 
     <li><a href="#">Link C-D</a></li> 
    </ul> 
    </li> 
    <li class="footer"><span> </span></li> 
</ul> 

：

>2012 
    >July 
    >title of muh new blag! 

和這裏的標籤。 （Check it out here on this guy's page）

我發現最喜歡這個的是this one。並且在剝離了很多額外的代碼後，我拿出這個：

$（'。example_menu li> .expanded'）。show（'normal'）;

$（ 'example_menu LI> A '）。點擊（函數（）{

$（本）.toggleClass（' 擴大 '）。toggleClass（' 崩潰'）。父（）。找到（ 'ul'）toggle（'normal'）;

}）;

此列出膨脹和收縮，並會如一個簡單的2級列表，工作帶來極大的：

>Year 
    >Month 

然而，同時擴大了2個更深層次或兩側展開的，要麼倒塌3級列表水平。我正在嘗試使下面的列表崩潰/展開，並保留摺疊的最低列表，直到直接激活。

有沒有更簡單的jQuery可摺疊列表？

或者是否有一種很好的方式來獲得直接的內部ul元素，並在切換所有其他內部ul元素時將其切換？

Answer 1

顯然我幾乎在那裏。

//hide everything 
$('.outline li > ul').hide(); 
//activate class "expanded" 
$('.outline li > .expanded + ul').show('normal'); 
$('.outline li > a').click(function() { 
//hide everything 
$(this).find('ul').hide(); 
//toggle next ul 
$(this).toggleClass('expanded').toggleClass('collapsed').next('ul').toggle('normal'); 
}); 

Answer 2

試試這個，如果有幫助... https://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/ 他們有一個zip文件爲您的參考..