jQuery эффект слайдов мегаменю

В настоящее время мой код jQuery ниже открывает и закрывает подменю, когда его родитель зависает. Но моя единственная проблема заключается в том, что когда я навожу курсор на другой элемент верхнего уровня, открытое подменю начинает закрываться, а подменю для элемента, который я сейчас навел, начинает скользить вниз, поэтому частично открыто 2 подменю.

Как мне добиться, чтобы новое подменю открывалось только после закрытия предыдущего? В идеале я хотел бы получить такой эффект, как здесь

$('.main-menu > ul > li').hover(function () {
        $(this).find('.sub-menu').slideDown('slow');
    }, function () {
        $(this).find('.sub-menu').stop(true, true).slideUp('slow');
    });

jquery slide jquery-hover
person ngplayground    schedule 04.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

.stop([clearQueue] [, jumpToEnd])

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});
person Tushar Gupta - curioustushar    schedule 04.03.2014
comment
Есть ли способ просто закрыть .sub-menu как связанный плагин? ваш пример просто мгновенно закрывает его - person ngplayground; 04.03.2014