Question

我列出了最低高度为75px的可折叠物品。使用“overflow：hidden”隐藏超过75px的任何内容。根据其内容，每个项目可能具有不同的实际高度。有没有办法可以使用jquery获得每个项目的实际高度，即使我已经使用css将其高度限制为75px。使用.height（）返回75px而不是元素的实际高度。

这是html：

<li class="parent">  
      <input type="button" id="expand" />
      <span></span>
      <span></span>         
      <span></span>
      <span></span>         
      <span></span>
</li>

最初只显示前2个跨度。这是jquery（附加到按钮点击事件）

$("#expand").parent().animate({'height':??},1000);

我需要动态替换??使用list元素的实际高度，以便在单击按钮时扩展到其完整高度。

任何帮助将不胜感激。

干杯， Kartik Rao

Answer 1

我认为最好的解决方案是设置height:auto以捕捉新高度应该是什么：

var $ep = $("#expand").parent(),
    epOldH = $ep.height(),
    epNewH;

$ep.css('height', 'auto');
epNewH = $ep.height();
$ep.css('height', epOldH);

$('#expand').click(function() {
    $ep.animate({'height': epNewH}, 1000);
});

<强> Here is a working demo.

Answer 2

您还可以使用javascript的scrollHeight属性。

$("#id_element").attr('scrollHeight')

Answer 3

也许您应该尝试使用“innerHeight”/“clientHeight”属性。

使用jquery获取部分隐藏div的实际高度

3 个答案: