Question

目前我的jQuery代码在其父级悬停时打开并关闭子菜单。但我唯一的问题是，当我鼠标悬停在另一个顶级项目上时，打开的子菜单开始关闭，我现在悬停的项目的子菜单开始向下滑动，因此部分有2个子菜单打开。

我怎样才能实现它，以便新的子菜单只能在前一个完成关闭后打开？理想情况下我想要的效果就像this plugin here

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

Answer 1

.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');
});

jQuery超级菜单幻灯片效果

1 个答案: