添加悬停延迟下拉菜单

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"); 
}); 

相反，我希望它只会增加延迟到导航项目我悬停所以我想是这样的下面，而是它无法确定是什么“这“是指。

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

事实上，你不能使用$（本），但它应该工作一样，：

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"); 
});