jquery简单关闭和扩展网页面板的方法

本文通过一个例子说明了jquery简单折叠和展开网页面板的方法。分享给大家参考。具体如下：

这是一个常见的面板代码，用于在网页上关闭(收缩)和扩展。有了jQuery插件，代码更加简化。点击面板的标题栏可以折叠或者展开这个图层，这是互联网上非常流行的效果。由此可以引申出相当多的功能，只要动动脑筋，一定可以做到。

运行效果截图如下：

在线演示地址如下：

http://demo . jb51 . net/js/2015/jquery-simple-hidden-show-web-table-codes/

具体代码如下：

！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' /title page层收缩和扩展面板代码/title style type=' text/CSS ' * { margin :0；划水：0；} body { font-size : 13px；线高：130%；padding: 60px } #面板{ width: 300pxborder: 1px实心#0050D0 }。head { padding: 5px背景# 96E555cursor:指针}。内容{ padding: 10pxtext-indent : 2em；边框-top: 1px实心# 0050D0显示：块；}/style script type=' text/JavaScript ' src=' http : jquery-1 . 6 . 2 . min . js '/script script type=' text/JavaScript ' $(function(){ $(' # panel H5 . head ')。toggle(function(){ $(this))。下一个(' div.content ')。hide()；}，function(){ $(this)。下一个(' div.content ')。show()；})}))/script/headsdydiv id=' panel ' H5 class=' head '点击此处展开/h5 div class='content '一个基于jquery的扩展面板代码，点击面板的标题栏折叠或展开这个图层，引用jQuery插件，这似乎是互联网上非常流行的效果。使这一段的效果更加简洁实用。/div/div/body/html希望本文的描述对大家的jquery程序设计有所帮助。