jquery简单实现网页层的展开与收缩效果

本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下：

这里演示了jquery网页层展开、层收缩代码，带缓冲动画效果，点击指定的文字或按钮，可展开指定层，再次单击会收起层，类似效果网上已见到许多，请根据自己的需要修改代码，别忘了引入最新的jQuery插件哦。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /titleDiv层的收缩与展开/title style # content { font-size : 14px；宽度： 730像素；高度： 25px背景： # FFF；线高：25 pxborder: 1px # ccc double飞越：隐藏；border:1px固体# 99a5ab} # key { color: red向右浮动：宽度：50 px高度：25px线高height :25 pxmargin :0 0 0 0 }/style脚本类型=' text/JavaScript ' src=' jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # key ')).切换(函数(){ $(this)).html(")关闭').父项()。动画({height:'280px'}，1000)；}，function(){ $(this).html(")展开').父项()。动画({height:'25px'}，1000)；})})))/脚本/头dydiv id=' content ' span id=' key ' '展开/spanspan class='fonttitle '标题/span表格宽度='700 '边框='1px '单元格填充='0 '单元格间距=' 0 ' tr td1/TD td2/TD td2/TD td2/TD td2/TD td2/TD td2/TD td2/TD td2/TD/tr/table/div/body/html希望本文所述对大家的jquery程序设计有所帮助。