任意高度元素展开收起动画

1.display 没有动画效果，生硬

html

展开

显示内容1

显示内容2

显示内容3

js

function loadMore(event){

if(event.target.innerText=='展开'){

$('.content'). css('display','block');

event.target.innerText='收起');

}else{

$('.content'). css('display','none');

event.target.innerText='展开');

}

}

2.slideUp和slideDown

html

展开

显示内容1

显示内容2

显示内容3

js

function loadMore(event){

if(event.target.innerText=='展开'){

$('.content'). slideDown();

event.target.innerText='收起');

}else{

$('.content'). slideUp();

event.target.innerText='展开');

}

}

3.max-height+overflow:hidden+transition

html

展开

显示内容1

显示内容2

显示内容3

js

function loadMore(event){

if(event.target.innerText=='展开'){

$('.content'). css('max-height','100px');

event.target.innerText='收起');

}else{

$('.content'). css('max-height','0');

event.target.innerText='展开');

}

}