드롭 다운 메뉴에 마우스 오버 지연 추가

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