Существует синтаксическая ошибка с вашей разметом - единственный действительный прямой поток <ul>
Элемент <li>
. Анкет Если вы хотите гнездовать свой список, сделайте это в пределах <li>
сам:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
Для переключения, мы просто рекомендуем искать брата <ul>
элемент и применить .slideToggle()
Метод на него, когда ссылка нажимается:
$(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();
});
});
Вот демонстрационная скрипка: http://jsfiddle.net/teddyrision/2y9fz/ (Добавлено больше элементов списка, чтобы продемонстрировать эффект)