Question

我有一个隐藏的子导航，其高度设置为0.该div内部是子导航的几个部分。

我得到被点击的部分的名称，然后获取该div的innerHeight。然后使用该高度，我将.sub_navigation高度从0设为动画值。但是出于某种原因，你第一次点击（获取值）它已经关闭，太高，第二次它是完美的。

你会如何解决这个问题？

Angular（从jQuery转换）

// Controller for Nav
app.controller('NavController', function(){
    // Property of Controller

    this.clicked = function(menuItem) {
        console.log(menuItem);

        var contentHeight = $('.'+menuItem+'-content').innerHeight();
        var content_height = $('.'+menuItem+'-content').innerHeight();

        $('.sub_navigation').css({'height' : '0px'});
        $('.'+menuItem+'-content').siblings().css({'display' : 'none'});
        $('.'+menuItem+'-content').css({'display':'block', 'height':'auto'});
        $('.sub_navigation').animate({
            height: contentHeight
        });

        console.log('content_height = '+content_height);
        console.log(contentHeight);
    };
});

的jQuery

$(document).delegate(".navigation-links a", "click", function(){
    var myContent = $(this).attr("data-content");
    var contentHeight = $("."+myContent+"-content").innerHeight();

    $("."+myContent+"-content").siblings().css({"display":"none"});
    $("."+myContent+"-content").css({"display":"block", "height":"auto"});
    $(".subNavigation").animate({
        height: contentHeight
    });
});

如果点击“成长”，第一次高度为400，第二次高度为266 :(

Answer 1

innerHeight documentation说：

.innerHeight()报告的值不保证准确何时隐藏元素的父级。为了获得准确的价值，你在使用.innerHeight()之前，应首先显示父级。

因此虽然父级是可见的，但是元素本身不可见这一事实会使高度值不准确。

您是否尝试过，更改订单？

//Make the sub menu visible first
$('.'+menuItem+'-content').siblings().css({'display' : 'none'});
$('.'+menuItem+'-content').css({'display':'block', 'height':'auto'});

var contentHeight = $('.'+menuItem+'-content').innerHeight();
var content_height = $('.'+menuItem+'-content').innerHeight();

$('.sub_navigation').css({'height' : '0px'});
....

Answer 2

尝试在获得高度时显示menuItem：

this.clicked = function(menuItem) {
  var menu = $('.'+menuItem+'-content');
  menu.show();
  var contentHeight = menu.outerHeight();
  menu.hide();
  ...

第一次如何获得正确的div innerHeight？

2 个答案: