Há um erro de sintaxe com sua marcação - o único descendente direto válido de um <ul>
elemento é <li>
. Se você quiser aninhar sua lista, faça -o dentro do <li>
em si:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
Para alternar, simplesmente instruímos a procurar um irmão <ul>
elemento e aplique o .slideToggle()
método para ele quando o link é clicado:
$(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();
});
});
Aqui está um violino de demonstração: http://jsfiddle.net/teddyrised/2y9fz/ (Adicionado mais itens de lista para demonstrar o efeito)