Es gibt einen Syntaxfehler mit Ihrem Markup - dem einzigen gültigen direkten Nachkomme von a <ul>
Element ist <li>
. Wenn Sie Ihre Liste nisten möchten, tun Sie dies innerhalb der <li>
selbst:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
Zum Umschalten weisen wir einfach an, nach einem Geschwister zu suchen <ul>
Element und anwenden Sie die .slideToggle()
Methode, wenn der Link geklickt wird:
$(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();
});
});
Hier ist eine Demo -Geige: http://jsfiddle.net/teddyrise/2y9fz/ (Weitere Listenelemente hinzugefügt, um den Effekt zu demonstrieren)