使用jQuery展開/摺疊UL列表 - 有問題

Question

我試圖創建一個博客歸檔列表，顯示按年份和月份（我已經用PHP/MySQL的完成）的所有文章

現在的我m試圖使它在頁面加載時，除最近一年/每月外，所有年份都會崩潰，並且每次都會在點擊時崩潰/展開。

目前，我的jQuery點擊功能將打開或關閉所有李元素，而不僅僅是我單擊的元素。我對jQuery仍然很陌生，所以我不確定如何使它僅僅影響我點擊的列表部分。

任何幫助將是盛大的！

這裏是我到目前爲止的代碼（從PHP/MySQL的生成列表循環）

<ul class="archive_year"> 
<li id="years">2012</li> 
    <ul class="archive_month"> 
     <li id="months">September</li> 
      <ul class="archive_posts"> 
       <li id="posts">Product Review</li> 
       <li id="posts">UK men forgotten how to act like Gentlemen</li> 
       <li id="posts">What Do Mormons Believe? Ex-Mormon Speaks Out</li> 
       <li id="posts">Here is a new post with lots of text and a long title</li> 
      </ul> 
     <li id="months">August</li> 
      <ul class="archive_posts"> 
       <li id="posts">A blog post with an image!</li> 
      </ul> 
    </ul> 
<li id="years">2011</li> 
    <ul class="archive_month"> 
     <li id="months">July</li> 
      <ul class="archive_posts"> 
       <li id="posts">New Blog!</li> 
      </ul> 
    </ul> 
<li id="years">2009</li> 
    <ul class="archive_month"> 
     <li id="months">January</li> 
      <ul class="archive_posts"> 
       <li id="posts">Photography 101</li> 
      </ul> 
    </ul> 
</ul>​ 

這裏是jQuery的迄今：

$(document).ready(function() { 

//$(".archive_month ul:gt(0)").hide(); 

$('.archive_month ul').hide(); 

$('.archive_year > li').click(function() { 
    $(this).parent().find('ul').slideToggle(); 
}); 

$('.archive_month > li').click(function() { 
    $(this).parent().find('ul').slideToggle(); 
}); 


}); 

我是用$試驗（」 .archive_month ul：gt（0）「）。hide（）;但它沒有按預期工作，它會改變開放和關閉。

任何幫助/想法？

而且，這裏是活生生的例子小提琴：http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

首先有關的問題：

1. ID-S必須是唯一的！
2. 你必須正確地窩您<li> -s

---

這裏是你如何解決這個問題 - DEMO

的jQuery

$('.archive_month ul').hide(); 

$('.months').click(function() { 
    $(this).find('ul').slideToggle(); 
}); 

HTML（固定）

<ul class="archive_year"> 
<li class="years">2012 
    <ul class="archive_month"> 
     <li class="months">September 
      <ul class="archive_posts"> 
       <li class="posts">Article 1</li> 
       <li class="posts">Article 2</li> 
       <li class="posts">Article 3</li> 
       <li class="posts">Article 4</li> 
      </ul> 
     </li> 
     <li class="months">August 
      <ul class="archive_posts"> 
       <li class="posts">Article 1</li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="years">2011</li> 
    <ul class="archive_month"> 
     <li class="months">July 
      <ul class="archive_posts"> 
       <li class="posts">Article 1</li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="years">2009</li> 
    <ul class="archive_month"> 
     <li class="months">January 
      <ul class="archive_posts"> 
       <li class="posts">Article 1</li> 
      </ul> 
     </li> 
    </ul> 
</ul>