Несколько выпадающих меню с событием клика

Question

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

$('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').click(function(){
    $('.open-menu').toggle();
        $('.active_menu').removeClass('active_menu');
        $(this).parent().toggleClass('active_menu');
        $(this).parent().find('ul').toggleClass('open-menu').toggle();
    return false;
});

Я пытался с помощью .open-menu добавить в раскрывающийся список, когда он активен, а active_menu это просто стиль активной ссылки.

// Le

$(document).ready(function() { 
    $('.sub-menu > a').click(function(){
            $('.sub-menu ul').toggleClass('open-menu');
            $(this).parent().find('ul').toggleClass('open-menu');
        return false;
    });
});

Теперь он не открывает меню, на котором я нажимаю, он открывает другое меню

Answer 1

Обычно, что я делаю в этой ситуации, я даю всем выпадающим классам, таким как

<select name="MyDropDown" class="DropDownGroup" > <option>1</opion> </select>

Поскольку все выпадающие списки имеют этот класс, довольно легко отключить все из них, кроме того, который вы только что щелкнули. Просто сделайте следующее

$(".DropDownGroup").live("click", function(){
   $(".DropDownGroup").hide();
   $(this).show();
});

Теперь это касается только клика, так как я предположил, что это то, что вы хотели, но вам может потребоваться сделать это при изменении индекса.

Answer 2

Хорошо, я получил это, чтобы работать так:

$('.sub-menu > a').click(function(){

        if($(this).parent().find('ul').hasClass('open-menu'))
        {
            $(this).parent().toggleClass('active_menu');
            $(this).parent().find('ul').toggleClass('open-menu');
        }else{
            $('.sub-menu ul.open-menu').toggleClass('open-menu');
            $(this).parent().find('ul').toggleClass('open-menu');
            $('.sub-menu.active_menu').toggleClass('active_menu');
            $(this).parent().toggleClass('active_menu');
        }
    return false;
});