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

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

html

<div style='border:1px solid #ddd'>

<p class='diji' onClick='loadMore(event)'>展开</p>

<div class='content' style='display:none'>

<p>显示内容1</p>

<p>显示内容2</p>

<p>显示内容3</p>

</div>

</div>

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

<div style='border:1px solid #ddd'>

<p class='diji' onClick='loadMore(event)'>展开</p>

<div class='content' style='display:none'>

<p>显示内容1</p>

<p>显示内容2</p>

<p>显示内容3</p>

</div>

</div>

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

<div style='border:1px solid #ddd'>

<p class='diji' onClick='loadMore(event)'>展开</p>

<div class='content' style='max-height:0;overflow:hidden;transition:max-width 1s;'>

<p>显示内容1</p>

<p>显示内容2</p>

<p>显示内容3</p>

</div>

</div>

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='展开');

}

}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,202评论 0赞 1
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,909评论 0赞 1
  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,060评论 0赞 2
  • 浏览器中的兼容问题
    1. 默认的内外边距不同 问题： 各个浏览器默认的内外边距不同 解决： *{margin:0;padding:0;...
    jslxm阅读 850评论 0赞 2
  • CSS
    display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别...
    纹小艾阅读 1,695评论 0赞 1