Jquery - Спадне меню, що натискається - javascript, jquery, випадаюче меню

У мене виникає проблема зі спадною меню. У мене працює частина меню, що випадає, але коли я натискаю на головне навігаційне посилання, воно розкриває всі елементи списку, а не розкриває ті, що стосуються батьківського ul.

Я завантажив файл у 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, воно буде спрацьовувати, коли ви натиснете будь-де в цьому списку, оскільки всі елементи списку справді є дітьми ul. Ваш оригінальний обробник кліків #secondary-nav ul ul говорить "перемикайте всі списки, які є дочірніми списками", але ви більш чітко хотіли досягти "перемикання списку, який є дочірньою частиною списку, що натиснув".

DEMO

ви повинні використовувати $(this).children()

DEMO

$(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