ドロップダウンメニューにホバー遅延を追加する

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

代わりに、私はそれをしたい、私は「そう、私は以下のようなものを試してみましたが、その代わりに、それは何を決定することができない上にマウスを移動していNAVアイテムに遅延を追加しますこれは "を指しています。

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