Question

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

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

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

Answer 1

看看这段代码。它将完成延迟动画并删除重复的动画

    var still;
    $('#test').hover(function () {
        var that = $(this);
        if (!still) {
            still = true;
            window.setTimeout(function () {
                if (still) {
                    that.animate({
                        'width': 200
                    }, 100, function () {
                        still = false;
                    });
                }
            }, 100);
        }
    }, function () {
        still = false;
        $(this).animate({
            'width': 100
        }, function () {

        });
    });

检查here

Answer 2

您可以在当前活动的子菜单中添加一个类，以防止其他子菜单被触发。在回调中删除课程。

jQuery试图阻止新的悬停运行直到前一个完成

2 个答案: