Jquery - интерактивное раскрывающееся меню

0

У меня проблема с моим выпадающим меню. У меня есть раскрывающаяся часть меню, но когда я нажимаю на основную навигационную ссылку, она отображает все элементы списка, а не раскрывает те, которые относятся к родительскому 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-->
Теги:
drop-down-menu

2 ответа

0
Лучший ответ

Вам необходимо изменить свой 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 говорит "переключать все списки, являющиеся дочерним по списку", но вы более остро хотели добиться "переключения списка, являющегося дочерним элементом элемента списка кликов".

DEMO

0

вы должны использовать $(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;
}

ДЕМО: После применения выше css

Ещё вопросы

Сообщество Overcoder
Наверх
Меню