编程 Javascript

基于jQuery实现多层次的手风琴效果附源码

Posted in Javascript onSeptember 21, 2015

基于jQuery多层次的手风琴是一款经过美化的多级多层次手风琴特效代码。效果图如下：

在线预览源码下载

html代码：

<aside class="accordion">
 <h>News</h>
 <div class="opened-for-codepen">
  <h>News Item #</h>
  <div class="opened-for-codepen">
  <h>News Item #a</h>
  <div>
   <h>News Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>News Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>News Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <h>News Item #b</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>News Item #c</h>
  <div class="opened-for-codepen">
   <h>News Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>News Subitem </h>
   <p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </div>
  </div>
  <h>News Item #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>News Item #</h>
  <div>
  <h>News Item #a</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>News Item #b</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
 </div>
 <h>Updates</h>
 <div>
  <h>Update #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>Update #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>Update #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>Update #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
 <h>Miscellaneous</h>
 <div>
  <h>Misc. #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>Misc. #</h>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h>Misc. #</h>
  <div>
  <h>Misc. Item #a</h>
  <div>
   <h>Misc. Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>Misc. Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>Misc. Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <h>Misc. Item #a</h>
  <div>
   <h>Misc. Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h>Misc. Subitem </h>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  </div>
 </div>
 </aside>

基于jQuery实现多层次的手风琴效果附源码

- Author -

爱上程序猿

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

Javascript 相关文章推荐

Js 订制自己的AlertBox(信息提示框)

Jan 09 Javascript

使用jQuery.fn自定义jQuery翻页插件

Jan 20 Javascript

jQuery判断checkbox是否选中的小例子

Dec 02 Javascript

解析JavaScript中instanceof对于不同的构造器或许都返回true

Dec 03 Javascript

基于豆瓣API+Angular开发的web App

Jan 02 Javascript

Javascript中判断对象是否为空

Jun 10 Javascript

Jquery Easyui进度条组件Progress使用详解（8）

Mar 26 Javascript

深入理解ES7的async/await的用法

Sep 09 Javascript

用vue构建多页面应用的示例代码

Sep 20 Javascript

vue-router2.0 组件之间传参及获取动态参数的方法

Nov 10 Javascript

纯JS实现可用于页码更换的飞页特效示例

May 21 Javascript

怎么理解wx.navigateTo的events参数使用详情

May 18 Javascript

基于insertBefore制作简单的循环插空效果

Sep 21 #Javascript

JS实现适合于后台使用的动画折叠菜单效果

Sep 21 #Javascript

jQuery实现响应鼠标滚动的动感菜单效果

Sep 21 #Javascript

JS+CSS实现简单的二级下拉导航菜单效果

Sep 21 #Javascript

JS实现超简单的仿QQ折叠菜单效果

Sep 21 #Javascript

基于replaceChild制作简单的吞噬特效

Sep 21 #Javascript

基于jQuery Circlr插件实现产品图片360度旋转

Sep 20 #Javascript

You might like

php setcookie函数的参数说明及其用法

2014/04/20 PHP

用PHP写的一个冒泡排序法的函数简单实例

2016/05/26 PHP

PHP模块化安装教程

2016/06/01 PHP

PHP实现防盗链的方法分析

2017/07/25 PHP

JS控制显示隐藏兼容问题(IE6、IE7、IE8)

2010/04/01 Javascript

用方法封装javascript的new操作符(一)

2010/12/25 Javascript

屏蔽相应键盘按钮操作

2014/03/10 Javascript

JavaScript中的console.time()函数详细介绍

2014/12/29 Javascript

返回函数的JavaScript函数

2016/06/14 Javascript

第五篇Bootstrap 排版

2016/06/21 Javascript

jQuery复合事件结合toggle()方法的用法示例

2017/06/10 jQuery

BootStrap模态框不垂直居中的解决方法

2017/10/19 Javascript

vue.js 嵌套循环、if判断、动态删除的实例

2018/03/07 Javascript

vue+webpack 更换主题N种方案优劣分析

2019/10/28 Javascript

Ajax获取node服务器数据的完整步骤

2020/09/20 Javascript

Python实现的HTTP并发测试完整示例

2020/04/23 Python

Django基础知识与基本应用入门教程

2018/07/20 Python

python版大富翁源代码分享

2018/11/19 Python

对Python3.x版本print函数左右对齐详解

2018/12/22 Python

Lancome兰蔻官方旗舰店：来自法国的世界知名美妆品牌

2018/06/14 全球购物

法国在线购买汽车轮胎网站：123pneus.fr

2019/02/25 全球购物

统计每一学生的平均成绩

2014/06/06 面试题

工程管理专业个人求职信范文

2013/12/07 职场文书

售后专员岗位职责

2013/12/08 职场文书

环境科学专业优秀毕业生自荐书

2014/02/03 职场文书

主办会计岗位职责

2014/03/13 职场文书

品质主管岗位职责

2014/03/16 职场文书

幼儿园教师岗位职责

2014/03/17 职场文书

2014乡镇机关党员个人对照检查材料思想汇报

2014/10/09 职场文书

县委务虚会发言材料

2014/10/20 职场文书

2015年安全生产目标责任书

2015/01/29 职场文书

学期个人自我总结

2015/02/13 职场文书

2016年学校“6﹒26国际禁毒日”宣传活动总结

2016/04/05 职场文书

导游词之镇江西津古渡

2019/11/06 职场文书

python疲劳驾驶困倦低头检测功能的实现

2022/04/04 Python

Zabbix对Kafka topic积压数据监控的问题(bug优化)

2022/07/07 Servers