Javascript 如何使用jQuery使悬停状态保持一段时间

我有这样的情况：我的菜单里有一些隐藏的元素，在我将其悬停后，这些元素正在显示。一切都很好，我有一些超时等，但当我离开悬停元素我的子菜单隐藏到。我设置此超时是因为我不想在更改每个主菜单元素后隐藏此子菜单，结束如果我在“超时区域”，我可以进入子菜单。当我将鼠标移出主菜单元素时，问题开始出现，超时有效，但在此间隔之后，我的子菜单将隐藏。当我在“超时区域”时，如何使子菜单保持可见？我希望这是清楚的解释

我的代码是：

$('.main_menu ul li').hover(function() {
    var self = this;
    setTimeout(function() {
        $(self).children('.sub_menu_main').addClass('opened');
    }, 200);
}, function() {
    setTimeout(function() {
        $('.main_menu ul li').children('.sub_menu_main').removeClass('opened');
    }, 200);
});

或者，这有助于：

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

---

您可以为setTimeout函数设置一个变量，然后在用户将鼠标悬停在其上方时清除超时

var t1;
$('.main_menu ul li').hover(function() {
    clearTimeout(t1);
    var self = this;
    setTimeout(function() {
        $(self).children('.sub_menu_main').addClass('opened');
    }, 200);
}, function() {
    t1 = setTimeout(function() {
        $('.main_menu ul li').children('.sub_menu_main').removeClass('opened');
    }, 200);
});

---

如果显示应用于

open

类，则代码就是这样做的。 在这里没有什么奇怪的，你自己看看吧。也许你的观念有些混乱

这就是你想要的吗：

$('.main_menu ul li').hover(function (e) {
    var self = this,
        time = (e.type ==='mouseleave') ? 1000 : 200;
    var t = setTimeout(function () {
        hoverCallback(self);
    }, time);
});

function hoverCallback(parentNode) {
    $('.sub_menu_main',parentNode).toggleClass('opened');
};