JQuery: одновременно открывается только одно раскрывающееся меню

Я собираюсь сделать простое выпадающее меню с помощью jQuery.

Вот план моего меню:

http://jsfiddle.net/W9c9y/

Это мой jQuery:

$( "a.drop_down" ).click(function () {

if ( $(this).siblings("ul").is( ":hidden" ) ) {
$(this).siblings("ul").slideToggle('slow','easeOutBounce');
} 

else {
$(this).siblings("ul").hide();
}
});

И вот то, чего я пытаюсь достичь:

Я хочу, чтобы за раз открывалось только одно раскрывающееся меню, любой щелчок меню (включая подменю) должен закрывать уже открытое раскрывающееся меню. Конечно, если я щелкну другое раскрывающееся меню, оно не только закроет открытое меню, но и выпадет.

Я был бы очень признателен за любое предложение.


drop-down-menu jquery
person user2399931    schedule 03.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

    $( "a.drop_down" ).click(function () {
    if ( $(this).siblings("ul").is( ":hidden" ) ) {
    $(".main_list ul").hide();
    $(this).siblings("ul").slideToggle('slow','easeOutBounce');
    } 

    else {
    $(this).siblings("ul").hide();
    }
    });

Скрипт: - http://jsfiddle.net/W9c9y/8/

person Rajesh J Nair    schedule 03.02.2014
comment
Почему вы повторяете условие if дважды? f ( $(this).siblings("ul").is( ":hidden" ) == true ) и if ( $(this).siblings("ul").is( ":hidden" ) ) делают одно и то же. - person James Donnelly; 03.02.2014

arrow_upward
0
arrow_downward

Просто присвойте раскрывающемуся раскрывающемуся списку класс «открытый», а затем скройте соответствующие ul элементы с этим классом, когда должен отображаться новый раскрывающийся список:

$( "a.drop_down" ).click(function () {
    var $ul = $(this).siblings("ul");
    if ( $ul.is( ":hidden" ) ) {
        $('.open').hide();
        $ul.addClass('open').slideToggle('slow','easeOutBounce');
    } 
    else {
        $ul.hide();
    }
});

демонстрация JSFiddle.

person James Donnelly    schedule 03.02.2014