У меня проблема с моим выпадающим меню. У меня есть раскрывающаяся часть меню, но когда я нажимаю на основную навигационную ссылку, она отображает все элементы списка, а не раскрывает те, которые относятся к родительскому 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
, и вам нужно добавить прослушиватель кликов в li, используя #secondary-nav ul
, вызывать событие click для любого элемента, который вы нажимаете внутри этого элемента список.
Попробуй это:
$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children('ul').slideToggle();
})
})
Помните, что селекторы в jQuery аналогичны селекторам CSS. Когда вы привязываете событие click к #secondary-nav ul
, оно будет срабатывать при нажатии в любом месте этого списка, потому что все элементы списка действительно являются дочерними элементами 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;
}