首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现的Accordion折叠面板效果代码

Posted in Javascript onSeptember 02, 2015

本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下：

这是一款Accordion折叠面板，折叠菜单代码，简单Accordion效果，采用CSS与jQuery实现，鼠标点击后展开，再次点击后折叠起来。是网上很常用的手风琴效果。

运行效果截图如下：

jquery实现的Accordion折叠面板效果代码

在线演示地址如下：

具体代码如下：

<!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>Simple Accordion with CSS & jQuery</title>
<style type="text/css">
html {
 overflow-Y: scroll;
}
body {
 font: 10px normal Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
 line-height: 1.7em;
}
*, * focus {
 outline: none;
 margin: 0;
 padding: 0;
}
.container {
 width: 500px;
 margin: 0 auto;
}
h1 {
 font: 4em normal Georgia, 'Times New Roman', Times, serif;
 text-align:center;
 padding: 20px 0;
 color: #aaa;
}
h1 span { color: #666; }
h1 small{
 font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 letter-spacing: 0.5em;
 display: block;
 color: #666;
}
h2.acc_trigger {
 padding: 0; margin: 0 0 5px 0;
 background: url(images/h2_trigger_a.gif) no-repeat;
 height: 46px; line-height: 46px;
 width: 500px;
 font-size: 2em;
 font-weight: normal;
 float: left;
}
h2.acc_trigger a {
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
 color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
 margin: 0 0 5px; padding: 0;
 overflow: hidden;
 font-size: 1.2em;
 width: 500px;
 clear: both;
 background: #f0f0f0;
 border: 1px solid #d6d6d6;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px; 
}
.acc_container .block {
 padding: 20px;
}
.acc_container .block p {
 padding: 5px 0;
 margin: 5px 0;
}
.acc_container h3 {
 font: 2.5em normal Georgia, "Times New Roman", Times, serif;
 margin: 0 0 10px;
 padding: 0 0 5px 0;
 border-bottom: 1px dashed #ccc;
}
.acc_container img {
 float: left;
 margin: 10px 15px 15px 0;
 padding: 5px;
 background: #ddd;
 border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
 if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
  $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
  $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
 }
 return false; //Prevent the browser jump to the link anchor
});
});
</script>
</head>
<body>
<h1>Simple Accordion with <span>CSS & jQuery</span><small>by Soh Tanaka | <a href="#">View Tutorial</a></small></h1>
<div class="container">
 <h2 class="acc_trigger"><a href="#">Web Design & Development</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need a Website?</h3>
   <a href="#"><img src="img1.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">Logo / Corporate Identity</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need a Logo?</h3>
   <a href="#"><img src="img2.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">Seach Engine Optimization</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need to be Heard?</h3>
   <a href="#"><img src="img3.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">eCommerce</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Have Product to Sell?</h3>
   <a href="#"><img src="img4.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
</div>
</body>
</html>

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

jquery实现的Accordion折叠面板效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）
Oct 27 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
鲲鹏(1) GCN(1) Flask(2) 柱状图(1) Pytesseract(1) PIL(1) 裁剪图片(1) Python(3) 进度条(1) 验证码(1)
You might like
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
用php解析html的实现代码
2011/08/08 PHP
php变量范围介绍
2012/10/15 PHP
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
js实现简单页面全屏
2019/09/17 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python调用fortran模块
2016/04/08 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python实现简易内存监控
2018/06/21 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
详解python分布式进程
2018/10/08 Python
详解Python3中ceil()函数用法
2019/02/19 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Woolworth官网：澳洲第一大超市
2017/06/25 全球购物
碧欧泉Biotherm加拿大官方网站：法国高端护肤品牌
2019/10/18 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
优秀高中生事迹材料
2014/02/11 职场文书
初中生评语大全
2014/04/24 职场文书
班主任个人工作反思
2014/04/28 职场文书
小学生竞选班干部演讲稿（5篇）
2014/09/12 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
拉贝日记观后感
2015/06/05 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Go语言特点及基本数据类型使用详解
2022/03/21 Golang