hoverIntent와 timeout의 고유 한 조합

Question

#main-nav li 항목 위로 마우스를 가져 가면 subnav이 표시되는 상황입니다. 하지만 사용자가 도달 할 수 있도록 지연이 필요합니다 (subnav). this과 같은 솔루션을 시도했지만 다른 항목에 마우스를 가져 가면 지연이 끝날 때까지 이전에 놓은 항목을 숨기지 않습니다. 그런 다음 handlerOut 내에서 if 문을 추가하여 또는 다른 탐색 항목 또는 mouseOut #main-nav 섹션에서 마우스를 가져 가면 타이머가 실행될 수 있도록 결정합니다 (그러나 handlerOut 내에서 실행되지는 않음).

아래 코드와 here it is on jsfiddle입니다.

var $mainlist = $('#main-nav li'); 
var $subnav = $('#main-nav li ul'); 

$(function() { 

    $mainlist.hoverIntent(

    function() { 
     $(this).addClass('active'); 
    }, 

    function() { 
     if ($('#main-nav li').hover() && $('#main-nav li').not($(this))) { 
      $(this).removeClass('active'); 
     } else if ($('#main-nav').add($subnav).mouseleave()) { 
      timer = setTimeout(function() { 
       $('#main-nav').find('li.active').removeClass('active'); 
      }, 1000); 
     } 
    }); 

    $subnav.hover(

    function() { 
     clearTimeout(timer); 
    }, 

    function() { 
     // 
    }); 
}); 

는 사이트 스타일 관련으로 sub-nav가 위치하는 방법을 무시하십시오.

도움을 주시면 감사하겠습니다.

코드와 몇 가지 문제가 있었다

Answer 1

:

첫째, 선택기 : 당신이 바로 아이를 원하는 경우

는 > 사용

var $mainlist = $('#main-nav > li'); 

당신은 또한에 #를 잊어 버렸습니다 두 번째 선택기. 어떤 경우

• 메인 목록 항목을 입력, 내가의 이전에 선택한 항목에서 active 클래스를 제거 :
  는 거기에서, 내가 제대로 시나리오를 가지고 가정, 꽤 솔직했다.
• 해당 요소를 나갈 때 하위 메뉴를 입력 할 수있는 제한 시간을 설정하십시오.
• 하위 메뉴로 들어갈 때 제한 시간을 지우면 하위 메뉴가 표시됩니다.
• 하위 메뉴를 종료 할 때 비활성화하십시오.

작동 버전은 here입니다.

입력하거나 퇴장 할 때 하위 메뉴가 분명하게 표시된다는 점에 유의하십시오.