Javascript 如何使用jQuery延迟mouseleave操作

我有菜单。在这个菜单中我有一些隐藏的子菜单，所以我在悬停动作后显示它。我也有一些子菜单显示延迟效果。现在我想在隐藏它时添加相同的效果。但它不起作用。另外，如何在下一个菜单元素上添加悬停/鼠标延迟

$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this,
            time = 200;
        $(self).data('timer', setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, time));
    },
    mouseleave: function(){
        var self = this,
            time = 200;
        clearTimeout($(self).data('timer'));
        setTimeout(function() {
            $(self).children('.sub_menu_main').removeClass('opened');
        }, time);
    }
});

---

可能是你没有在你的鼠标移动事件中使用self吗？这个函数是什么？放一条调试器语句，看看这是否是您认为它所指的内容。

是否可能是您在mouseleave事件中没有使用self？这个函数是什么？放置一条调试器语句，看看这是否是您认为它所指的内容。

您考虑过使用.delay吗

你考虑过使用延迟吗

---

我很好地解决了这个问题，所以：

var timer;
$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, 100)
    },
    mouseleave: function(){
        var self = this;
        setTimeout(function(){
            if (!$(self).children('.sub_menu_main').is(":hover")){
                 $(self).children('.sub_menu_main').removeClass('opened');
            }
        }, 100);
    }
});

---

我很好地解决了这个问题，所以：

var timer;
$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, 100)
    },
    mouseleave: function(){
        var self = this;
        setTimeout(function(){
            if (!$(self).children('.sub_menu_main').is(":hover")){
                 $(self).children('.sub_menu_main').removeClass('opened');
            }
        }, 100);
    }
});