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

在HTML在屏幕上呈现之前，Javascript无法获得正确的高度。要首先解决此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; });

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

2 个答案: