sử dụng jQuery để expand/collapse danh sách ul - gặp vấn đề

Question

Tôi đang cố gắng để tạo ra một danh sách blog lưu trữ trong đó cho thấy tất cả các bài viết theo năm và tháng (mà tôi đã thực hiện với PHP/MySQL)

Bây giờ tôi m cố gắng để làm cho nó để tải trang, tất cả các năm được thu gọn trừ năm mới nhất/tháng và cũng có thể mỗi sẽ sụp đổ/mở rộng khi nhấp chuột.

Hiện tại chức năng nhấp chuột jQuery của tôi sẽ mở hoặc đóng tất cả các phần tử li thay vì chỉ một phần tử tôi nhấp. Tôi vẫn còn khá mới với jQuery vì vậy tôi không chắc chắn làm thế nào để làm cho nó chỉ ảnh hưởng đến phần danh sách mà tôi bấm vào.

Mọi trợ giúp sẽ thật tuyệt vời!

Dưới đây là mã của tôi cho đến nay (danh sách được tạo ra từ PHP/MySQL vòng)

<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>​ 

Và đây là jQuery cho đến nay:

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


}); 

tôi đã thử nghiệm với các $ (" .archive_month ul: gt (0) "). hide(); nhưng nó không hoạt động như mong đợi, nó sẽ mở và đóng lại.

Bất kỳ trợ giúp/suy nghĩ nào?

Ngoài ra, đây là một ví dụ fiddle sống: http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

đầu tiên về các vấn đề:

1. ID-s phải là duy nhất!
2. Bạn cần phải đúng cách tổ của bạn <li> -s

---

Và đây là cách bạn có thể giải quyết vấn đề - DEMO

jQuery

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

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

HTML(cố định)

<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>