jquery实现简单合拢与展开网页面板的方法


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jquery实现简单合拢与展开网页面板的方法。分享给大家供大家参考。具体如下:

这是一款网页上常见的合拢(收缩)、伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠、或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来。

运行效果截图如下:

jquery实现简单合拢与展开网页面板的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页上的层收缩、伸展面板代码</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").hide();
 },function(){
  $(this).next("div.content").show();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">点击此处标题可展开</h5>
 <div class="content">
  一款基于jquery的伸展面板代码,点击面板的标题栏即可折叠、或展开这个层,貌似网上很流行的效果,引用了jQuery插件,使得本款效果更加的简洁实用, </div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
js表数据排序 sort table data
Feb 18 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 #Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 #Javascript
JavaScript常用标签和方法总结
Sep 01 #Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 #Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 #Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
You might like
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php实现读取超大文件的方法
2014/07/28 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Python列表list数组array用法实例解析
2014/10/28 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
党员教师群众路线思想汇报范文
2014/10/28 职场文书
中学教师个人总结
2015/02/10 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang