Bootstrap 3 折叠：获取折叠元素的非折叠高度答案

【问题标题】：Bootstrap 3 collapse: Get non-collapsed height of a collapsed elementBootstrap 3 折叠：获取折叠元素的非折叠高度
【发布时间】：2016-03-14 01:27:06
【问题描述】：

我有一些引导面板，其中panel-heading 用于折叠panel-body。我想知道当panel-body处于折叠状态时是否可以访问它的非折叠高度？

您可以查看此jsFiddle，其中面板主体已折叠。单击面板标题将展开正文。当身体折叠时，我如何确定它没有折叠时的高度（不展开它）？

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

您可以跟踪面板内有多少元素，然后您可以从那里计算他的高度：

$(document).ready(function(){
  var rowHeight = 50;
  var marginBottom = 50;
  var nrOfRows = 0;
  $('.my-table .row').each(function(){
     nrOfRows ++
  })
  var panelHeight = (rowHeight*nrOfRows)+prseInt(marginBottom)
})

【讨论】：

也许我不清楚，但我想要元素的高度，而不是它包含的行数。 CSS 高度中的高度。我想最好以像素为单位。
据我所知，我认为这并不容易。我所做的是以下。你的行的高度可能是 40px。所以当你知道你有两行时，你也知道容器的高度是 70px。我很好奇，所以我想知道您为什么想知道隐藏面板的高度。

【解决方案2】：

这个问题是 Bootstrap 3 特有的，所以这个答案也很好，一般可能没有用。

在 bootstrap 3 中，当一个元素被折叠时，它的高度使用元素样式显式设置为 0px。您可以禁用此内联元素样式并通过以下方式访问其高度：

$(element_selector)['height']('').height();

这不会显示元素，因为除了将高度设置为0px，当元素折叠时，其display 属性设置为none。

【讨论】：

我整天都在想这个问题，然后我就想到了这个。您可以为面板中的行指定一个类，然后将它们设置为固定高度，例如 50 像素，我们需要添加一些容差，因为行没有到达面板的底部，所以我们再说一次 50 像素。将它放在适当的位置，您可以获得容器的高度。请参阅更新的示例。您可以更改这两个值，直到获得所需的结果。添加或删除行将始终为您提供（几乎）正确的高度。
我的回答给出了元素的确切高度，不需要使用固定高度，并且不依赖于包含相同大小行（或根本行，就此而言）的元素。
很高兴知道@Joseph。感谢您指出这一点，因为老实说，我不知道这一点。因此，与您交谈对我来说非常有用。我真的很抱歉我不能为你做你想要的。也许下次我会的。顺便说一句，祝你节日愉快。