Несколько выпадающих меню на основе CSS и jQuery остаются открытыми после нажатия на другое

#jquery #drop-down-menu #menu

#jquery #выпадающее меню #меню

Вопрос:

Я настраиваю несколько выпадающих меню на основе jQuery на одной странице на основе следующего руководства: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx .

Теперь я изменил код в нескольких местах и предложил следующее решение: http://jsfiddle.net/NcNHf/2 /.

Это работает довольно хорошо, но я ищу способ закрыть другие выпадающие меню, которые все еще открыты, когда я нажимаю на другое.

Итак, как я могу убедиться, что на странице всегда может быть активировано только одно выпадающее меню?

Заранее спасибо!

Ответ №1:

Вы можете выбрать все выпадающие меню и отфильтровать текущие, а затем скрыть их все.

 $(".dropdown > dt a").click(function (e) {
    var $ul = $(this).parent().next().find('> ul').toggle();
    $('.dropdown ul').not($ul).hide();
    e.preventDefault();
});
 

Рабочий пример