獲取菜單的高度在頁面加載

Question

我正在嘗試設置菜單，並用：

var headed = $('#menu-main_menu li'); 
headed.hover(
    function() { 
     var subed = $(this).find('ul.sub-menu').height(); 
     var headwi = $(this).width(); 
     $(this).find('ul.sub-menu').css({'top': -subed, 'width': headwi }).show(); 
    }, 
    function() { 
     $(this).find('ul.sub-menu').hide(); 
     return false; 
    } 
); 

下面是一個例子的jsfiddle：http://jsfiddle.net/moabi/VDZYV/2/ ，正如你所看到的，它沒有得到第一槍的高度。我做錯了什麼 ？ （菜單在頁面的底部，所以我想子菜單上去，這就是爲什麼我把負值） 謝謝

Answer 1

這是因爲你的子菜單項是浮動旁邊每個其他在默認情況下爲水平線，所以最初子菜單的高度只是其中一個項目的高度，並非全部加在一起。

如果設置子菜單的寬度，第一，然後它的高度將是正確的，因爲該項目將已經堆疊，所以像：

headed.hover(function() { 

    var subm = $('ul.sub-menu', $(this)).show(); 
    subm 
     .width($(this).width()) 
     .css('top', -subm.height()); 

}, function() { 
    $('ul.sub-menu', $(this)).hide(); 
    return false; 
}); 

什麼可能會更容易，雖然是調整CSS所以子菜單項自然垂直疊加，因此：

#access .menu-header .sub-menu li 
{ 
float: none; 
} 

Answer 2

JavaScript無法獲得正確的高度，直到HTML呈現在屏幕上。要解決此show()子菜單，然後再改變它的top位置：

var headed = $('#menu-main_menu li'); 
headed.hover(function() { 
    var sub = $(this).find('ul.sub-menu'); 
    var headwi = $(this).width(); 
    sub.css('width', headwi); 
    sub.css('top', -1000); // temporary top postion 
    sub.show(); 
    sub.css('top', -(sub.height())); // real top position 
}, function() { 
    $(this).find('ul.sub-menu').hide(); 
    return false; 
}); 

例子：http://jsfiddle.net/2wKJQ/

編輯

，保持了visibility隱藏，以防止任何閃爍的第二個例子並有一個fadeIn/fadeOut：

var headed = $('#menu-main_menu li'); 
headed.hover(function() { 
    var sub = $(this).find('ul.sub-menu'); 
    var headwi = $(this).width(); 
    sub.css('width', headwi); 
    sub.css('top', -1000); 
    sub.css('visibility', 'hidden'); 
    sub.show(); 
    sub.css('top', -(sub.height())); 
    sub.css('visibility', 'visible'); 
    sub.hide(); 
    sub.fadeIn(); 
}, function() { 
    $(this).find('ul.sub-menu').fadeOut(); 
    return false; 
});