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

Question

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

我获取被单击部分的名称，然后获取该 div 的内部高度。然后使用该高度，将 .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

内部高度documentation说:

The value reported by .innerHeight() is not guaranteed to be accurate when the element's parent is hidden. To get an accurate value, you should show the parent first, before using .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'});
....