2011-04-26 71 views
0

可能沒有解決這個問題。我正在使用一個jQuery下拉菜單,在DOM準備就緒時加載。根據我的理解,這意味着它會一直等到頁面完全加載,直到可以使用爲止。頁面加載後Jquery mega drop down loading

這對於菜單系統是有問題的,因爲人們希望在整個頁面加載之前馬上使用菜單。

這是我的網站,你可以看到發生這種情況。 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 2011-04-26 04:52:55

回答

0

你可以把這些腳本放在任何你想要的地方,以瞭解你在做什麼。 HTML是按順序呈現的,因此腳本無法獲取稍後在文檔中定義的DOM對象或js變量。這就是爲什麼我們通常使用文檔onload事件來執行init事件,因爲所有元素都被加載。

在這種情況下,我猜你可能會在ul#topnav標記關閉後立即將沒有document.ready的腳本放入。

+0

我剛剛嘗試使用沒有document.ready的腳本,並且dropdrop完全停止工作。它的JavaScript已經是按順序調用的第一件事情之一。 – Sackling 2011-04-26 13:15:25