Hay un error de sintaxis con su marcado: el único descendiente directo válido de un <ul>
El elemento es <li>
. Si quieres anidar tu lista, hazlo dentro del <li>
sí mismo:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
Para alternar, simplemente instruimos a buscar un hermano <ul>
elemento y aplicar el .slideToggle()
Método para que se haga clic en el enlace:
$(function() {
// Hide submenus
$(".nav ul").hide();
// Toggle nested <ul> (siblings of the link)
$(".nav > li > a").click(function(e) {
$(this).siblings("ul").slideToggle();
e.preventDefault();
});
});
Aquí hay un violín de demostración: http://jsfiddle.net/teddyrised/2y9fz/ (Se agregó más elementos de la lista para demostrar el efecto)