하위 메뉴 지연

Question

스크립트를 만들었습니다. 내비게이션에 내 하위 메뉴가 열립니다. 하위 메뉴에서 마우스를 이동할 때. 하위 메뉴는 300ms의 지연으로 닫아야합니다. 그러나 지연은 효과가 없습니다. 이 문제를 어떻게 해결할 수 있습니까? 이건 내 스크립트입니다

$('.nav-main .container li').hover(function() { 
    if ($(this).find('.submenu').length > 0) { 
     $(this).addClass("hover"); 
     $(this).find('.submenu').show(); 
    } 
}, function() { 
    $(this).find('.submenu').delay(300).hide(); 
    $(this).removeClass("hover"); 
}); 

Answer 1

나는 다음과 같은 코드를 테스트하지 않았습니다 만 작동합니다 ...

$('.nav-main .container li').hover(function() { 
    if ($(this).find('.submenu').length > 0) { 
     $(this).addClass("hover"); 
     $(this).find('.submenu').show(); 
    } 
}, function() { 
    var submenu = $(this).find('.submenu'); 
    setTimeout(function() { 
     submenu.hide(); 
    }, 300); 
    $(this).removeClass("hover"); 
}); 

당신은에서는 setTimeout() 메소드를 만들어야합니다

Answer 2

, 또한, 당신은 필요 함수 안에 사용할 객체를 정의하십시오. $ (this)는 null입니다.

$('.nav-main .container li').hover(function() { 
    if ($(this).find('.submenu').length > 0) { 
     $(this).addClass("hover"); 
     $(this).find('.submenu').show(); 
    } 
}, function() { 
    var object = $(this); 
    setTimeout(function() 
    { 
     $(object).find('.submenu').hide(); 
     $(object).removeClass("hover"); 
    }, 300); 
});