添加懸停延遲下拉菜單

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