效果如下：

展开前的图(1)

在图(2)展开后，

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' style * { margin 3360 0；padd : 0；} .面板{ width: 555pxheight: auto背景色： # 333333；margin: 50px自动；} .面板标题{宽度： 100%；高度： 68px；文本对齐：中心；Font: 600 18px/68px '微软雅黑'；color: # fffcursor:指针；} .折叠{ width : 100%；高度： 0；背景-颜色： # 167 ea0；飞越：隐藏；} .折叠p { color: # fffFont: 500 16px '微软雅黑'；text-indent : 2em；padding: 20px 20px 0 20px} #一，#二，#三{边框-top:实心1px # ccc}/style/head Body div class=' panel ' id=' panel ' H4 class=' panel-title ' id=' panel-title ' 1 《抉择》/H4 div class=' collapse ' id=' One ' p/p/div H4 class=' panel-title ' id=' panel-title ' 2 《生命》/H4 div class=' collapse ' id=' Tow ' p/p/div H4 class=' panel-title ' id=' panel-title ' 3 《大小》//管理timer obj.timer=setinterval(函数(){//timer开关，用于判断timer var标志是否=true//traverse JSON for(var arrt in JSON){//计算步长=目标位置-当前位置var step=(JSON[arrt]-par sent(getstyle(obj，arrt)))/5；//步长舍入步长=步长0？数学天花板(台阶):数学地板(台阶)；//盒子移动：框的当前位置步长为圆角obj . style[arrt]=par sent(get style(obj，arrt))步长' px '；//只要其中一个不满足条件，定时器if(parsent(getStyle(obj，arrt))就不会停止！=JSON[arrt]){ flag=false；} }//关闭定时器if(flag){ clear interval(obj . timer)；//2秒后执行回调函数setTimeout(函数(){ //判断是否有回调函数，如果有endfn则执行回调函数endfnndfn()；},1000) } },20);}//获取当前样式函数getStyle(obj，arrt){ //兼容ie return obj.currentStyle？obj . current style[arrt]: GetComputed style(obj，null)[arrt]；} var panel=document . getelementbyid(' panel ')；var oH=panel . getelementsbytagname(' H4 ')；var oDiv=panel . getelementsbytagname(' div ')；Var str=['人的一生往往都在做一个选择，比如：去哪个大学读书？选择哪个职业？你娶什么样的女人？等等伤脑筋的事情。一个人选择能力的存在，可以说明他的人格是否成熟。但是那些没有主见的人，并没有因为选择而痛苦。因为在做决定的时候，他总是会问别人，‘嘿，你觉得怎么样？大多数能取得巨大成就的人都是有强烈选择的人。他知道事情的成败，因为没有人能替他做，也没有人能替你决定。在选择的那一刻，成败已经揭晓。“生命也许是宇宙间唯一值得崇拜的东西。孕育、诞生和展现生命的本质是一个极其激动人心的过程。生活就像音乐和图画一样，暗地里承载着一种注定的色调或色彩。当它遇到春潮的翻滚，当它听到号角的催促时，它会突然活跃起来，展现出它华丽而热情的本性。当然，这种本质更可能是卑鄙、懦弱和无聊的；它的主人别无选择。诚然，生活是希望。应该说，卑鄙和庸俗不应该过早自满，也不应该误认为它们已经成功地消除了高贵和纯洁。伪装也不能持久，因为时间就像一条长河，卑鄙的人、奸商、庸俗的棍棒不可能永远戴着教育家、诗人、军人的桂冠。在他们畅通无阻的职业生涯结束时，他们的后代将长期感到羞辱。”一个朋友谈到了他亲戚的阿姨，她从来不穿适合她生活的鞋子，经常穿着大鞋子到处走。如果小儿子问她，她会说：‘各种尺码的鞋子价格都一样，为什么不买大一点的呢？每次我讲这个故事，都有人笑得喘不过气来。

事实上，我们在生活中会看到很多这样的‘奶奶’。没有思想的作家写出厚重苦涩的作品；没有内容，却画超巨画的画家；经常离家在外的商人拥有庞大的家园。很多人不断追求伟大，但其实只是被内心的贪婪驱使，就像买了特大号的鞋子，忘了自己的脚。不管买什么鞋，合身是最重要的，不管追求什么，总要适可而止。我崇拜高尚生活的秘密。我崇拜这一生出生、成长、战斗、残疾和牺牲时溅出的烟火。我钦佩一个活着的灵魂在山川、大海和大陆上自由漂浮。是的，生活就是希望。它是漂浮和自由的。它让人类中的一个热血者不甘失败，无怨无悔地追逐着自己的金色牧场。'];for(var I=0；长度；i ){ oH[i]。索引=I；oH[i]。onclick=function(){ for(var j=0；joH.lengthj ){ animate(oDiv[j]，{ height :0 })；} if(ParSeint(GetStyle(Odiv[this . index]，' height ')==0){ animate(Odiv[this . index]，{ height :210 })；oDiv[this.index]。儿童[0]。innerHTMl=str[this . index]；}else{ animate(oDiv[this.index]，{ height :0 })；}}} /script/html以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！