Question

我有七个div，每个都有类“row”，每个都有自己的内容，它在开头隐藏，但是还有一个时间轴从第一行div开始到最后一行结束row div它的高度是动态计算的，具体取决于行的总高度。代码是这样的：

<div id="milestone_view" class="timeline">
  <div id="line" ></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

和js代码：

var totalHeight = 0;
$("#milestone_view").children('.row').each(function(){
    totalHeight += $(this).height();
    $(this).attr('height',$(this).height());
});
$("div#line").css({height:(totalHeight)});
alert(totalHeight);

我已添加此行$(this).attr('height',$(this).height());来检查每个div的高度。看起来很简单，但是当页面加载时我得到警告“363”和六个div有高度= 51，一个有57（小biger，没关系），然后当我点击任何div来显示它的内容，然后再次点击它隐藏它（并再次调用此函数）我得到“419”，六个div的高度为59px，一个高度为65px。这就像他们最初的身高一样严重。

我不知道我是否清楚地解释了它，它只是用kendoui编写的应用程序的一小部分，但是现在这个小部分不起作用。如果这改变了什么：那些div是动态加载的，而不仅仅是它们的内容。他们的人数可能只有七人。

Answer 1

听起来你的.row元素周围有8px的边距。将height()更改为outerHeight()以包含此边距：

totalHeight += $(this).outerHeight(true);

Answer 2

听起来你有padding，margin，border或line height样式只有在显示它们之前和之后的差异时才应用于隐藏元素显示。

jQuery严重计算元素的高度

2 个答案: