jqueryを使用して部分的に隠されたdivの実際の高さを取得します

Question

私は折りたたみ可能なアイテムのリストを最低75px持っています。 75pxを超えるものは、 "overflow：hidden"を使用して非表示になります。それぞれのアイテムの内容によっては実際の高さが異なる場合があります。私はcssを使用してその高さを75pxに制限していますが、jqueryを使って各アイテムの実際の高さを得る方法はありますか？ .height（）を使用すると、要素の実際の高さではなく75pxが返されます。初回のみ2つのスパンが最初に表示されている

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

：

は、ここでのhtmlです。 jquery（ボタンクリックイベントに添付）

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

私は動的に？リスト要素の実際の高さと比較して、ボタンをクリックすると完全な高さに展開されます。

ご協力いただければ幸いです。あなたは "innerHeightは"/"clientHeight" プロパティで試してみてください

乾杯、 Kartikラオ

Answer 1

私は最善の解決策は、新しい高さはどうあるべきかをキャプチャするheight:autoを設定することであると思う：

あなたはまた、ジャバスクリプトの scrollHeight属性を使用することができます

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

Maby。

Answer 3

。

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