목록 항목 간을 이동할 때 jQuery 메뉴가 깨짐

Question

드롭다운이 있는 사용자 정의 jQuery 가로 메뉴를 만들었습니다.처음에는 목록 항목 위에 마우스를 올리면 하위 메뉴가 페이드 인되고, 목록 항목에서 멀어지면 페이드 아웃되었습니다.

그러나 하위 메뉴 밖으로 마우스를 움직여도 즉시 사라지지 않는 효과를 만들고 싶습니다(예:픽셀 단위로 오버슛하는 경우).이전 질문에서 hoverIntent 플러그인에 대해 알게 되었지만 형제 하위 메뉴를 열 때 짜증나는 지연이 발생합니다.그래서 나는 내 자신의 기능을 염두에 두고 처음부터 시작했습니다.

내 HTML은 표준 중첩 목록(ul#menu > li > ul > li)입니다.내 자바스크립트는 다음과 같습니다.

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

다음이 작동합니다.

• 최상위 수준으로 이동 li 하위 메뉴를 엽니다.
• 하위 메뉴에서 벗어나면 2초 후에 하위 메뉴가 닫힙니다(테스트 목적으로,최종 버전에서는 축소될 예정입니다.)
• 하위 메뉴에서 나갔다가 다시 돌아오면 시간 초과가 취소되어 메뉴가 사라지는 것을 방지합니다.

그러나 다음은 작동하지 않습니다.

• 하나의 최상위 목록 항목에서 다음 항목으로 이동할 때 이전 하위 메뉴가 사라지지 않습니다.일반적인 지연 없이 즉시 페이드 아웃되기를 원합니다.
• 두 개의 최상위 목록 항목 간에 이동하면 menuVisible 로 설정되어 있습니다 false, 시스템을 망칠 수 있습니다.이 때문입니다 cancelTimeout 첫 번째 동위 항목으로 이동할 때 true로 설정되고, 두 번째 동위 항목으로 이동해도 여전히 true입니다.

이런 일이 발생하는 이유와 해결 방법에 대한 통찰력을 주시면 감사하겠습니다.

Answer 1

당신은 슈퍼피쉬 메뉴 jQuery 플러그인?

나는 내 프로젝트에서 그것을 사용했고 그것이 당신을 위해 이러한 문제를 해결할 것이라고 생각합니다.