jQuery родител и деца за SlideToggle - jquery

Имам изградено CSS меню за сайт за пазаруване. Идеята е да се кликне върху основната категория, след което слайдовете се задействат и зареждат подкатегориите. Създадох принципите и гледах на jQuery .dechild

Въпреки това, когато щракнете върху връзката, нищо не се случва.

Моят jQuery е както следва:

$("ul.sub_menu").css("display","none");

$(".nav-list li a.clickable").toggle(function () {
$(this).children().slideToggle();
}, function() {
$(this).children().slideToggle();
}

Моята HTML структура върви така ...

<ul class="nav nav-list">
<li>

<a class="clickable" href="#">Christmas</a>

<ul class="sub_menu">
<li>
<a href="/~sweetdis/category/wreaths" >Wreaths</a>
</li>
<li>
<a href="/~sweetdis/category/large-logs">Large Logs</a>
</li>
</ul>

</li>
</ul>

Липсва ли ми нещо тук?

Много благодаря

Отговори:

2 за отговор № 1

Опитайте тази -

$(".sub_menu").hide();
$(".clickable").click(function(){
$(this).next("ul").slideToggle();
});

Или -

$(".ulClass li a:first").click(function(){
$(this).next("ul").slideToggle();
});

Работна демонстрация

Нищо не се случва, когато кликнете върху clickable защото няма деца

---

2 за отговор № 2

Защото ползвате slideToggle за децата на anchor с класа clickable когато няма деца от тази котва, можете да ги използвате siblings вместо:

$("ul.sub_menu").css("display","none");

$(".nav-list li a.clickable").click(function () {
$(this).siblings("ul.sub_menu").slideToggle();
});​

цигулка: http://jsfiddle.net/QqMks/

---