1.display 没有动画效果,生硬
html
展开
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
展开
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
展开
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='展开');
}
}