jQuery MouseOut 지연 예외

Question

그래서 새 클라이언트의 WordPress 테마의 기본으로 부트 스트랩 3.x를 사용합니다. 그들은 수평 하부 메뉴를 원합니다. 일부 메가 메뉴 CSS 기술을 사용하여 작업 한 적이 있지만 더 이상 마우스 커서를 놓지 않는 순간 사라질 때까지 하위 메뉴 항목을 가져 오는 것은 매우 어려웠습니다. 따라서 간단한 jQuery/CSS 지연으로 전환하여 마우스가 사라진 후 하위 메뉴가 잠깐 동안 표시 될 수 있도록했습니다.

그냥 마우스를 가져 가면 나머지 페이지로 이동하는 것이 좋습니다. 두 개의 상위 메뉴 항목간에 앞뒤로 전환 할 때 문제가 발생합니다.

나는 그 사건에 대한 예외를 어떻게 설정할 수 있을지 궁금 해서요, 아니면 내가 가지고있는 것을 더 나은 방법으로 다시 작성할 수 있을지 궁금합니다.

는 여기에 지금까지 진행 한 작업은 다음과 같습니다

(function($) { 
$(document).ready(function() 
        { 
         $('li.dropdown').hover(function(){ 
          var timer = $(this).data('timer'); 
          if(timer) clearTimeout(timer); 
          $(this).addClass('over'); 
         },function(){ 
          var li = $(this); 
          li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 1000)); 
         }); 
        }); 
})(jQuery); 

JSFIDDLE EXAMPLE 내가 어떤 도움이나 조언을 주셔서 감사합니다.

Answer 1

handlerIn 일 때 over 클래스를 모두 지울 수 있습니다.

(function($) { 
     $(document).ready(function() 
          { 
           var $dropdowns = $('li.dropdown'); 
           $dropdowns.hover(function(){ 
            var timer = $(this).data('timer'); 
            if(timer) clearTimeout(timer); 
            $dropdowns.removeClass('over'); 
            $(this).addClass('over'); 
           },function(){ 
            var li = $(this); 
            li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 1000)); 
           }); 
          }); 
    })(jQuery);