Mostrare e nascondere gli elementi di una lista con jQuery richiede semplicemente l'uso dei metodi di attraversamento del DOM in riferimento all'elemento corrente. Se il fratello precedente o successivo dell'elemento corrente ha una data classe CSS, allora eseguiremo un'azione per mostrarlo o nasconderlo. Se l'elemento corrente non soddisfa questo requisito, allora selezioneremo gli elementi attivi partendo direttamente dal genitore, ossia dalla lista stessa. Vediamo come.
Useremo questa struttura HTML:
<ul id="test">
<li>A</li>
<li class="active">B</li>
<li class="active">C</li>
<li>D</li>
<li>E</li>
</ul>
Con questi stili CSS:
#test {
width: 14em;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.1em;
border: 1px solid #999;
}
#test li {
display: block;
padding: 0.4em;
background: #eee;
cursor: pointer;
}
#test li.active {
background: #c60;
display: none;
}
Assoceremo a ciascuna voce un evento click con le seguenti azioni:
$(function() {
$('li', '#test').click(function() {
var $li = $(this);
var next = $li.next();
var prev = $li.prev();
if(next.is('li.active')) {
if(next.is(':hidden')) {
next.slideDown(300);
} else {
next.slideUp(300);
}
}
if(prev.is('li.active')) {
if(prev.is(':hidden')) {
prev.slideDown(300);
} else {
prev.slideUp(300);
}
}
if(!prev.is('li.active') && !next.is('li.active')) {
$li.parent().find('li.active').each(function() {
if($(this).is(':hidden')) {
$(this).slideDown(300);
} else {
$(this).slideUp(300);
}
});
}
});
});
Verificheremo che l'elemento precedente o successivo a quello corrente abbiano o meno la classe active. Qualora questa condizione non venisse soddisfatta, allora partiremo dalla lista per eseguire una selezione globale su tutte le voci aventi la classe specificata.
Potete visionare l'esempio finale in questa pagina.