Liste ne veut pas basculer

Question

J'ai un (sémantiquement incorrect) HTML comme ceci:

<ul> 
<li class="year">2009</li> 
<li><a href="project1.html">Project 1</a></li> 
<li><a href="project2.html">Project 2</a></li> 
<li><a href="project3.html">Project 3</a></li> 
</ul> 

<ul> 
<li class="year">2008</li> 
<li><a href="project4.html">Project 4</a></li> 
<li><a href="project5.html">Project 5</a></li> 
<li><a href="project6.html">Project 6</a></li> 
</ul> 

<ul> 
<li class="year">2007</li> 
<li><a href="project7.html">Project 7</a></li> 
<li><a href="project8.html">Project 8</a></li> 
<li><a href="project9.html">Project 9</a></li> 
</ul> 

et un script jQuery comme ceci:

$(function() { 
    $('.year').click(function() { 
     $('ul').find('li:not(.year)').slideUp('fast'); 
     $(this).closest('ul').find('li:not(.year)').toggle('fast'); 
    }) 
}) 

Il fonctionne presque au besoin. Par défaut, tous les ul li -s sont masqués sauf ceux ayant l'année de cours. Lorsque l'utilisateur clique sur une année, les liens de l'année ouverte s'ouvrent et les liens de l'année cliquée glissent vers le bas. Le problème est que si je clique sur une année quand elle est ouverte, elle glisse d'abord (en étant interceptée par la première ligne) puis glisse vers le bas via la ligne de bascule. Je voudrais qu'il reste fermé avec la ligne de diapositive ne pas intercepter l'année cliquée.

Espérons que cela a du sens.

Toute aide appréciée.

Answer 1

Il est possible que vous deviez utiliser le sélecteur :hidden ou :visible pour distinguer ceux qui sont déjà affichés.

$(function() { 
    $('.year').click(function() { 
     $('ul').find('li:not(.year)').slideUp('fast'); 
     $(this).closest('ul').find('li:not(.year):hidden').toggle('fast'); 
    }) 
}) 

Answer 2

En ce qui concerne: il n'est pas vrai que vous ne pouvez utiliser que le filtre, par opposition à trouver des expressions ici, par exemple. : pas (: blah) ou: pas ([blah] mais pas: pas (.blah)?