wykorzystanie jQuery, aby rozwinąć/zwinąć listę ul - problemy

Question

Próbuję utworzyć listę archiwum blog, który pokazuje wszystkie artykuły rok i miesiąc (co robiłem z PHP/MySQL)

Teraz ja” Próbuję zrobić to tak, że przy ładowaniu strony wszystkie lata są zwinięte, z wyjątkiem ostatniego roku/miesiąca, a także, że każdy z nich zwinie się/rozwinie kliknięcie.

W tej chwili moja funkcja klikania jQuery otworzy lub zamknie wszystkie elementy li zamiast tylko jednego kliknięcia. Wciąż jestem całkiem nowy w jQuery, więc nie jestem pewien, jak to zrobić, aby wpłynąć na wybraną sekcję listy.

Każda pomoc byłaby wspaniała!

Oto mój kod tak daleko (lista jest generowana z PHP/MySQL pętle)

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

A oto jQuery dotąd:

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


}); 

I eksperymentował z $ (” .archive_month ul: gt (0) "). hide(); ale nie zadziałało zgodnie z oczekiwaniami, zmieniło się to na otwarte i zamknięte.

Każda pomoc/przemyślenia?

Również tutaj jest skrzypce na żywo przykład: http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

Pierwszy o problemach:

1. ID-y muszą być unikalne!
2. Trzeba prawidłowo gniazdo Twój <li> -s

---

A oto jak można rozwiązać ten problem - DEMO

jQuery

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

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

HTML(stałe)

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