jquery - 获取页面加载时菜单的高度

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

这是因为您的子菜单项默认在水平线上彼此相邻 float ，因此最初子菜单的高度只是其中一项的高度，而不是全部加在一起。

如果您首先设置子菜单的宽度，那么它的高度将是正确的，因为项目将堆叠起来，所以类似于:

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;
}