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 相关文章推荐
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JavaScript Window浏览器对象模型原理解析
May 30 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
第八节 访问方式 [8]
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
Python 如何访问外围作用域中的变量
2016/09/11 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
化工专业推荐信范文
2013/11/28 职场文书
伊琍体标语
2014/06/25 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
索赔员岗位职责
2015/02/15 职场文书
教师个人自我评价
2015/03/04 职场文书
小人国观后感
2015/06/11 职场文书
消防安全主题班会
2015/08/12 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
担保书怎么写 ?
2019/04/22 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
vue+element ui实现锚点定位
2021/06/29 Vue.js