uso de jQuery para expandir/contraer la lista de UL - tener problemas

Question

Estoy tratando de crear una lista de archivo del blog que muestra todos los artículos por año y mes (que yo he hecho con PHP/MySQL)

Ahora estoy Estoy tratando de hacerlo de modo que en la carga de la página, todos los años se colapsen, excepto el último año/mes y también que cada uno colapsará/expandirá al hacer clic.

Por el momento, mi función jQuery click abrirá o cerrará todos los elementos li en lugar de solo hacer clic. Todavía soy bastante nuevo en jQuery, así que no estoy seguro de cómo hacer que solo afecte a la sección de la lista en la que hago clic.

¡Cualquier ayuda sería grandiosa!

Aquí está mi código hasta ahora (la lista se genera a partir de PHP/MySQL bucles)

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

Y aquí está el jQuery hasta ahora:

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


}); 

estaba experimentando con el $ (" .archive_month ul: gt (0) "). hide(); pero no funcionó como se esperaba, se abriría y se cerraría.

¿Alguna ayuda/pensamientos?

Además, aquí es un violín, por ejemplo en vivo: http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

En primer lugar acerca de los problemas:

1. ID-s debe ser único!
2. Tienes que anidan adecuadamente su <li> -s

---

Y aquí es cómo se puede resolver el problema - DEMO

jQuery

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

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

HTML(fijo)

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