Jquery: menú desplegable seleccionable: javascript, jquery, menú desplegable

Tengo un problema con mi menú desplegable. Tengo la parte desplegable del menú funcionando, pero cuando hago clic en un enlace de navegación principal, revela todos los elementos de la lista en lugar de revelar los que son relevantes para el padre ul.

He subido el archivo a jsfiddle. ¿Podrían ayudarme? 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-->

Respuestas

Necesita modificar su JavaScript para no activar el slideToggle en todo ul ul elementos, y debe agregar el oyente de clics a un li - usando #secondary-nav ul activará ese evento de clic para cualquier elemento que haga clic en esa lista.

Prueba esto:

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

Recuerde, los selectores en jQuery son como los selectores CSS. Cuando vincula el evento de clic a #secondary-nav ul, se activará cuando haga clic en cualquier lugar de esa lista, ya que todos los elementos de la lista son hijos del ul. Tu controlador de clics original #secondary-nav ul ul dice "alternar todas las listas que son un elemento secundario de una lista", pero más concretamente quería lograr "alternar la lista que es un elemento secundario del elemento de la lista en el que se hizo clic".

MANIFESTACIÓN

Deberías usar $(this).children()

MANIFESTACIÓN

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

También deberías agregar este CSS

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

DEMO: Después de aplicar css arriba