如何得到正确的格innerHeight第一次？ [英] How to get correct div innerHeight the first time?

问题描述

我有高度设置为0内部的分区的隐藏子导航是次资产净值的几个部分。

I have a hidden sub nav with height set to 0. Inside of that div are several sections of sub navs.

我得到的是点击，该节的名称，然后得到div的innerHeight。然后，使用这样的高度，我的动画 .sub_navigation 0高度的值。但是由于某种原因，第一次单击（获得价值）这关，太高，第二次它是完美的。

I get the name of the section that is clicked, then get the innerHeight of that div. Then using that height, I animate the .sub_navigation height from 0 to the value. However for some reason the first time you click (get the value) it's off, too high, the 2nd time it's perfect.

你会如何解决这个问题？

How would you fix this?

的角（从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：（

If you click on Grow, the first time height is 400, the 2nd time it's 266 :(

推荐答案

该innerHeight 文档说，

The innerHeight documentation says that:

按 .innerHeight（）报告的价值是不能保证准确
  当元素的父是隐藏的。为了得到一个准确值，
  首先应该显示父，使用前 .innerHeight（）。

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().

因此​​，虽然父是可见的，或许一个事实，即元件本身是不可见的，使高度值是不准确的。

So although the parent is visible, maybe the fact that the element itself is invisible makes the height value to be inaccurate.

您是否尝试过，改变的顺序？

Have you tried, changing the order?

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

这篇关于如何得到正确的格innerHeight第一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！