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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js三种排序算法分享
Aug 16 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
详解JavaScript树结构
Jan 09 Javascript
通过JS运行机制的角度说说作用域
Mar 12 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP 编程安全性小结
2010/01/08 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
PHP实现倒计时功能
2020/11/16 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python图像和办公文档处理总结
2019/05/28 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python 元组的使用方法
2020/06/09 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
小区门卫工作职责
2013/12/14 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
车辆委托书范本
2014/10/05 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
《落花生》教学反思
2016/02/16 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python