Question

我试图在jquery下拉菜单中添加延迟。我已经让延迟工作正常了。但是它为所有下拉菜单添加了延迟。以下是我使用的代码：

var timer;
var delay = 1000;
$('.header__nav-main-list > li', '#header').hover(function() {
    timer = setTimeout(function(){
        $('.header__nav-main-list > li', '#header').children(".header__nav-sub-list").show();
        $('.header__nav-main-list > li', '#header').addClass("is-open");
    }, delay);
}, function() {
    clearTimeout(timer);
    $(".header__nav-sub-list").hide();
    $('.header__nav-main-list > li').removeClass("is-open");
});

相反，我希望它只是将延迟添加到我正在悬停的导航项目上，所以我尝试了下面这样的内容，但相反它无法确定＆＃34;这个＆＃34;指的是。

var timer;
var delay = 1000;
$('.header__nav-main-list > li', '#header').hover(function() {
    timer = setTimeout(function(){
        $(this).children(".header__nav-sub-list").show();
        $(this).addClass("is-open");
    }, delay);
}, function() {
    clearTimeout(timer);
    $(".header__nav-sub-list").hide();
    $('.header__nav-main-list > li').removeClass("is-open");
});

Answer 1

确实你不能使用$（this），但它应该是这样的：

var timer;
var delay = 1000;
$('.header__nav-main-list > li', '#header').hover(function(event) {
    var $this = $(this);
    timer = setTimeout(function(){
        $this.children(".header__nav-sub-list").show();
        $this.addClass("is-open");
    }, delay);
}, function() {
    clearTimeout(timer);
    $(".header__nav-sub-list").hide(0);
    $('.header__nav-main-list > li').removeClass("is-open");
});

将悬停延迟添加到下拉菜单

1 个答案: