Jquery - падащо меню, което можете да кликнете - javascript, jquery, падащо меню

Имам проблем с падащото меню. Работещата част от менюто работи, но когато щракнете върху главна навигационна връзка, тя разкрива всички елементи от списъка, вместо да разкрива тези, свързани с родителския ул.

Качих файла в jsfiddle. Бихте ли ми помогнали: http://jsfiddle.net/7rwhP/1/

        <div id="secondary-nav"><!--secondary-nav-->
<ul>
<li><a href="#.html">Current Article</a>
<ul>
<li><a href="#.html">Example 1</a></li>
</ul>
</li>

<li><a href="#.html">Past Articles</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
<li><a href="#.html">Tradition</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->

Отговори:

Трябва да промените JavaScript, за да не задействате slideToggle на всички ul ul елементи и трябва да добавите слушателя за щракване към лична употреба #secondary-nav ul ще задейства това събитие за щракване за всеки елемент, който щракнете в този списък.

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

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
})

Не забравяйте, че селекторите в jQuery са точно като CSS селекторите. Когато обвържете събитието за щракване към #secondary-nav ul, ще се задейства, когато щракнете където и да е в този списък, защото всички елементи от списъка наистина са деца на ул. Вашият оригинален манипулатор за кликвания #secondary-nav ul ul казва „превключване на всички списъци, които са дете на списък“, но вие по-ясно искате да постигнете „превключване на списъка, който е дете на щракнатия елемент от списъка“.

ДЕМОНСТРАЦИЯ

трябва да използвате $(this).children()

ДЕМОНСТРАЦИЯ

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
});

Трябва да добавите и този css

#secondary-nav ul li {
white-space:nowrap;
}

DEMO: След прилагане на css