如何使用 jQuery 离开悬停状态一段时间答案

【问题标题】：How can i leave hover state for some time with jQuery如何使用 jQuery 离开悬停状态一段时间
【发布时间】：2012-12-30 23:56:36
【问题描述】：

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

和我的代码：

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

【问题讨论】：

标签： javascript jquery timeout show-hide

【解决方案1】：

如果显示应用于open 类，这就是您的代码所做的。没有惊喜在这里看到它自己http://jsfiddle.net/7GWKX/。也许你的概念里有些东西搞砸了。

这是你想要的吗：http://jsfiddle.net/7GWKX/15/

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

【讨论】：

【解决方案2】：

您可以为 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);
});

【讨论】：