아약스 드롭 다운 메뉴에 호버트트 추가하기

Question

아약스를 통해로드되는 메가 드롭 다운 메뉴에서 작업 중입니다. 나는 호버 인 텐트를 메뉴에 추가하고 싶지만 .live()와 hoverintent를 결합하는 좋은 예를 찾을 수 없었다.

나는 붕괴 할 때 다른 메뉴를 시작하기 위해 몇 초 동안 마우스 오버를 지연하고 싶습니다.

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('li.top-nav-links').live('mouseenter', function() { 
      $(this).find('a.top-nav-link-hover').addClass("top-nav-hover"); 
      $(this).find('div').slideDown(300); 
      $(this).css('z-index', 9000);  
    }); 

    $('li.top-nav-links').live('mouseleave', function() { 
      $(this).find('div').slideUp(function() { 
        $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover"); 
       }); 
       $(this).css('z-index', 8000); 
    }); 

}); 
</script> 

참고 : 기본적으로 그것의 내부에 숨겨진 DIV를 보여 정렬되지 않은 목록입니다. Z- 인덱스는 현재 가장 상단

Answer 1

이 작동 결국 무엇인가에 드롭 다운 공중 선회 재정렬. 나는 왜 Ajax를 통해로드 되었기 때문에 .live()가 필요하지 않은지 완전히 확신하지 못합니다. 나는 그것이 나를 잘못한 것 같아요.

$(document).ready(function(){ 

    var overFn = function(){ 
     $(this).find('a.top-nav-link-hover').addClass("top-nav-hover"); 
     $(this).find('div.sub').slideDown(300); 
     $(this).css('z-index', 9000); 
     return false; 
    }; 

    var outFn = function(){ 
     $(this).find('div.sub').slideUp(280, function() { 
      $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover"); 
      }); 
     $(this).css('z-index', 8000); 
    }; 

    $('li.top-nav-links').hoverIntent({ 
     over: overFn, 
     out: outFn 
    }); 

}); 

을 참고 .live() hoverIntent 첨가 전에 요구되었다.

---

는 업데이트 :은 위의 코드는 테스트 사이트에서 일했다. 그러나 일단 우리가 라이브 사이트로 이동 한 후에는 hoverIntent를 중지하기 때문에 변경해야했습니다. 나는 RANDOM.NEXT()에 의해이 게시물을 발견 우리의 해상도를 찾는 데 매우 도움이 - http://bit.ly/D4qr9

이 최종 최종 코드 :

jQuery(function() 
{ 
    $('li.top-nav-links').live('mouseover', function() 
    { 
     if (!$(this).data('init')) 
     { 
      $(this).data('init', true); 
      $(this).hoverIntent 
      ( 
       function() 
       { 
        $(this).find('a.top-nav-link-hover').addClass("top-nav-hover"); 
        $(this).find('div.sub').slideDown(300); 
        $(this).css('z-index', 9000); 
        return false; 
       }, 

       function() 
       { 
        $(this).find('div.sub').slideUp(280, function() { 
         $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover"); 
         }); 
        $(this).css('z-index', 8000); 
       } 
      ); 
      $(this).trigger('mouseover'); 
     } 
    }); 
}); 

Answer 2

<script type="text/javascript"> 
$(document).ready(function(){ 
    var config = { 
     // put hoverIntent options here  
    }; 
    $('li.top-nav-links').live('hoverIntent', config, function() { 
      $(this).find('a.top-nav-link-hover').addClass("top-nav-hover"); 
      $(this).find('div').slideDown(300); 
      $(this).css('z-index', 9000);  
    }); 

    $('li.top-nav-links').live('mouseleave', function() { 
      $(this).find('div').slideUp(function() { 
        $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover"); 
       }); 
       $(this).css('z-index', 8000); 
    }); 

}); 
</script>