Jquery - Menu a discesa cliccabile - javascript, jquery, menu a discesa

Sto riscontrando un problema con il mio menu a discesa. Ho la parte a discesa del menu funzionante, ma quando faccio clic su un collegamento di navigazione principale svela tutte le voci dell'elenco invece di svelare quelle relative all'ul principale.

Ho caricato il file su jsfiddle. Per favore, mi aiuti: http://jsfiddle.net/7rwhP/1/

        <div id="secondary-nav"><!--secondary-nav-->
<ul>
<li><a href="#.html">Current Article</a>
<ul>
<li><a href="#.html">Example 1</a></li>
</ul>
</li>

<li><a href="#.html">Past Articles</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
<li><a href="#.html">Tradition</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->

risposte:

Devi modificare il tuo JavaScript in modo da non attivare slideToggle su tutto ul ul elementi e devi aggiungere il listener di clic a un li - using #secondary-nav ul attiverà quell'evento clic per qualsiasi elemento su cui fai clic all'interno di tale elenco.

Prova questo:

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
})

Ricorda, i selettori in jQuery sono proprio come i selettori CSS. Quando si associa l'evento click a #secondary-nav ul, verrà attivato quando si fa clic in un punto qualsiasi di tale elenco, poiché tutti gli elementi dell'elenco sono effettivamente figli dell'ul. Il gestore di clic originale #secondary-nav ul ul dice "attiva / disattiva tutti gli elenchi che sono figli di un elenco", ma hai voluto più chiaramente ottenere "attiva / disattiva l'elenco che è figlio dell'elemento dell'elenco selezionato".

DEMO

dovresti usare $(this).children()

DEMO

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
});

Dovresti aggiungere anche questo CSS

#secondary-nav ul li {
white-space:nowrap;
}

DEMO: dopo l'applicazione sopra css