这是我一直在使用的。
基本上，我得到所有子元素的高度，总结它们，然后设置元素的最大高度，覆盖类（你可以让你自己的类，所以你可以有不同的实例）。
看看这个。
<!doctype html>
<html>
<head>
<style>
/* OVERFLOW HIDDEN */
.overflowHidden{
overflow: hidden;
}
/* HEIGHT */
.transitionHeight{
-webkit-transition: max-height 250ms ease-in-out;
-moz-transition: max-height 250ms ease-in-out;
-o-transition: max-height 250ms ease-in-out;
-ms-transition: max-height 250ms ease-in-out;
transition: max-height 250ms ease-in-out;
}
.heightAnimOff{
height: auto;
max-height: 0px;
}
.heightAnimOn{
height: auto;
max-height: 20000px;
}
</style>
<script src="jquery_1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.toggleAnimHeight = function(alvo, velha, nova){
if ( $(alvo).attr("data-maxHeight") != null ){
}else{
var totalH = 0;
$(alvo).children().each(function(){
totalH += $(this).height();
});
$(alvo).attr("data-maxHeight", totalH)
$("head").append('<style> .'+nova+'{ max-height: '+totalH+'px; } </style>');
}
if ( $(alvo).attr("class").indexOf(nova) == -1 ){
$(alvo).removeClass(velha);
$(alvo).addClass(nova);
}else {
$(alvo).removeClass(nova);
$(alvo).addClass(velha);
}
}
}(jQuery));
</script>
</head>
<body>
<div class="animContainer">
<button onmousedown="$.toggleAnimHeight( $('#target1'), 'heightAnimOff', 'heightAnimOn' );">Anim Toggle</button>
<div id="target1" class="overflowHidden heightAnimOff transitionHeight">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id pretium enim, quis faucibus urna. Phasellus blandit nisl eget quam mollis vulputate. Sed pulvinar eros vitae neque volutpat, vitae suscipit urna viverra. Etiam rhoncus purus vitae tortor pulvinar, sed vulputate arcu convallis. Sed porta, mi consectetur convallis semper, odio mauris iaculis purus, non tempor purus augue pharetra lorem. Integer dictum lacus arcu. Vivamus metus lorem, fermentum ac egestas ac, ornare non neque. Aenean ullamcorper adipiscing ante, et mollis orci feugiat et.</p>
<p>Praesent pretium sit amet eros et lacinia. Etiam nec neque ullamcorper, sagittis quam vitae, dictum ipsum. Sed volutpat lorem libero, nec commodo magna posuere rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id erat odio. Sed faucibus sem eu tortor laoreet pulvinar. Praesent pharetra risus eget metus vulputate, eget condimentum leo consequat. Praesent consequat rutrum convallis.</p>
<p>Aenean euismod metus quis libero commodo, tristique cursus odio vestibulum. Donec quis lobortis arcu, eu luctus diam. In eget nisi non mauris commodo elementum. Sed gravida leo consequat, tempus orci eu, facilisis ipsum. Cras interdum sed odio vel tincidunt. Morbi arcu ipsum, ultricies dictum enim quis, varius dignissim massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper, magna eu aliquam luctus, leo purus accumsan massa, at auctor dui dolor eu augue. Maecenas ultrices faucibus ante non mattis.</p>
<p>Pellentesque ut est tortor. Quisque adipiscing ac nisi vel interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis ante sollicitudin vehicula ornare. Quisque sagittis diam nibh, ac imperdiet nibh pulvinar eu. Integer at ipsum a purus tristique porttitor vitae in ante. Sed arcu neque, lacinia eu dolor nec, pellentesque interdum tortor. Morbi ornare aliquet aliquam. Aenean egestas, erat vel tempus mollis, est eros iaculis enim, quis fringilla purus tortor sollicitudin erat. Donec ultrices elit metus, sed iaculis mi dignissim vulputate. Donec adipiscing imperdiet porttitor. Sed ac lacus adipiscing, sagittis sem quis, tincidunt metus. Curabitur vitae augue a dolor scelerisque lobortis ut a nisi.</p>
<p>Quisque sollicitudin diam sit amet dui sollicitudin, ac egestas turpis imperdiet. Nullam id dui at lectus ultrices aliquam. Nam non luctus tortor, vitae elementum elit. Nullam id bibendum orci. Aliquam hendrerit nisi vitae tortor mollis, nec aliquam risus malesuada. In scelerisque nisl arcu, sit amet tincidunt libero consequat pharetra. Quisque aliquam consectetur purus nec sollicitudin. Pellentesque consectetur eleifend tortor in blandit. Pellentesque euismod justo sed lectus congue, ut malesuada diam rhoncus. Nulla id tempor odio. Nulla facilisi. Phasellus lacinia neque in nisi congue aliquet. Aliquam malesuada accumsan mauris eget mattis. Maecenas pellentesque, sem sed ultricies ullamcorper, massa enim consectetur magna, eget sagittis lorem leo vel arcu. Cras ultrices nunc id risus commodo laoreet. Proin nisl nulla, elementum ac libero sed, aliquam mollis massa.</p>
</div>
</div>
</body>
</html>
