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程序设计有所帮助。

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python编写俄罗斯方块
2020/03/13 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python基于openpyxl生成excel文件
2020/12/23 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
护理人员的自我评价分享
2014/03/15 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
护士辞职信怎么写
2015/02/27 职场文书
监护人证明
2015/06/19 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android