2011-04-26 6 views
0

수정 사항이 없을 수 있습니다. DOM이 준비되었을 때로드되는 jquery 드롭 다운 메뉴를 사용하고 있습니다. 내가 이해하는 바로는 이것이 사용 준비가 될 때까지 페이지가 완전히로드 될 때까지 기다리는 것을 의미합니다.페이지로드 후 Jquery 메가 드롭 다운로드

사람들이 전체 페이지를로드하기 전에 자주 메뉴를 사용하기 때문에 메뉴 시스템에 문제가 있습니다.

여기 내 사이트에서 이런 일이 일어나는 것을 볼 수 있습니다. http://bit.ly/g1sn5t

이 나는 ​​메뉴

$(document).ready(function() { 


    function megaHoverOver(){ 
     $(this).find(".sub").stop().fadeTo('fast', 1).show(); 

     //Calculate width of all ul's 
     (function($) { 
      jQuery.fn.calcSubWidth = function() { 
       rowWidth = 0; 
       //Calculate row 
       $(this).find("ul").each(function() {      
        rowWidth += $(this).width(); 
       }); 
      }; 
     })(jQuery); 

     if ($(this).find(".row").length > 0) { //If row exists... 
      var biggestRow = 0; 
      //Calculate each row 
      $(this).find(".row").each(function() {        
       $(this).calcSubWidth(); 
       //Find biggest row 
       if(rowWidth > biggestRow) { 
        biggestRow = rowWidth; 
       } 
      }); 
      //Set width 
      $(this).find(".sub").css({'width' :biggestRow}); 
      $(this).find(".row:last").css({'margin':'0'}); 

     } else { //If row does not exist... 

      $(this).calcSubWidth(); 
      //Set Width 
      $(this).find(".sub").css({'width' : rowWidth}); 

     } 
    } 

    function megaHoverOut(){ 
     $(this).find(".sub").stop().fadeTo('fast', 0, function() { 
      $(this).hide(); 
     }); 
    } 


    var config = {  
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)  
     interval: 0, // number = milliseconds for onMouseOver polling interval  
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)  
     timeout: 0, // number = milliseconds delay before onMouseOut  
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)  
    }; 

    $("ul#topnav li .sub").css({'opacity':'0'}); 
    $("ul#topnav li").hoverIntent(config); 



}); 

function clearText(field){ 

    if (field.defaultValue == field.value) field.value = ''; 
    else if (field.value == '') field.value = field.defaultValue; 

} 




// JavaScript Document 

을 위해 사용하고 내 스크립트는이 다른 모든 전에로드 할 수 어쨌든 있나요입니까?

+1

그렇기 때문에 먼저 기능 메뉴를 만든 다음 그 위에 JS를 레이어하는 이유입니다. JS 부분을 메뉴 부분 바로 아래에 놓고'.ready' 호출로 랩핑하지 않아도됩니다. – JohnP

답변

0

당신이하고있는 일을 정확히 이해하고있는 경우에 당신이 원할 때마다 그 스크립트를 넣을 수 있습니다. HTML은 순차적으로 렌더링되므로 스크립트는 나중에 문서에 정의 된 DOM 객체 또는 js 변수를 가져올 수 없습니다. 그래서 우리는 일반적으로 모든 요소가로드되기 때문에 init 작업을 수행하기 위해 document onload 이벤트를 사용합니다.

이 경우 ul # topnav 태그를 닫은 직후 document.ready없이 스크립트를 넣을 수 있습니다.

+0

방금 ​​document.ready없이 스크립트를 사용하려고 시도했지만 드롭 다운이 완전히 작동하지 않았습니다. 그것의 자바 스크립트는 이미 순차 순서로 호출 된 첫 번째 것들 중 하나입니다. – Sackling

관련 문제