Question

我遇到这种情况：我的菜单里有一些隐藏的元素，在我悬停之后，这些元素正在显示。 Eveything很好，我有一些超时等但当我离开悬停元素我的子菜单隐藏。我设置了此超时，因为我不想在更改每个主菜单元素后隐藏此子菜单，如果我在“超时区域”，则结束。我可以进入子菜单。当我将鼠标移出主菜单元素时出现问题，超时工作但在此间隔后我的子菜单隐藏。当我在超时区域时，如何才能看到子菜单？＆＃39;？我希望这是明确的言论......

enter image description here

和我的代码：

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

如何使用jQuery将悬停状态保留一段时间

2 个答案: