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中的null和undefined解析
Apr 14 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 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删除xml文档内容的方法
2015/01/23 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
PDO实现学生管理系统
2020/03/21 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python检测服务器是否正常
2014/02/16 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
python基础之//、/与%的区别详解
2022/06/10 Python