javascript - 如何使用 jQuery 离开悬停状态一段时间

Question

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

和我的代码：

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

Answer 1

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

Answer 2

如果显示应用于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');
};