html不固定高度元素的展开、收起

记录自己遇到的问题。
关于html不固定高度元素的展开和收起。
因需要隐藏的内容是不固定长度，height是不能写死的，如果将height写为auto，那transtion则没有0到auto的动画效果。
解决方法：
1、使用max-height属性（不推荐）：max-height数值设置尽量大于内容高度。缺点是展开和收起的动画速度不一致，展开速度快、收起速度慢
2、使用animate：在点击展开的时候，取元素在height:auto时的高度，再使用animate赋予动画效果

// 假设元素点击前的高度是200px，点击时展开所有内容（不固定高度）
$('#id').on('click',function(){
	var usedHegiht = $(this).height(); //点击时取此元素的高度。下面进行判断
	if (usedHeight == 200) { //判断此元素是否是我们一开始设置的200px高度仪
		autoHeight = $(this).css({height:'auto'}).height(); //先赋值auto 再取具体高度
		$(this).height(200).animate({height:autoHeight},300); //animate赋予元素200px到auto的动画
	}else {
		autoHeight = $(this).height(); //不是起始状态的高度，取此时height
		$(this).height(autoHeight ).animate({height:200},300); //animate赋予元素auto到200px的动画
	}
})
//上面是我手敲的列子，建议不要判断的时候写死。可以加个标记temp = false
// 点击展开后temp修改为true；点击收起后修改为false。这样就不用if 判断时的数值写死了，程序员哪有写死的，对吧