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

我有一个隐藏的导航栏，其高度设置为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 :(

最佳答案

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'});
....

关于javascript - 第一次如何获得正确的div innerHeight？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26044964/