编程 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 相关文章推荐

jQuery中创建实例与原型继承揭秘

Dec 21 Javascript

javascript中this做事件参数相关问题解答

Mar 17 Javascript

zTree插件之单选下拉菜单实例代码

Nov 07 Javascript

js实现局部页面打印预览原理及示例代码

Jul 03 Javascript

javascript验证内容为数字以及长度为10的简单实例

Aug 20 Javascript

浅谈Node.js：Buffer模块

Dec 05 Javascript

详解Javascript几种跨域方式总结

Feb 27 Javascript

Vue学习笔记进阶篇之vue-router安装及使用方法

Jul 19 Javascript

利用npm 安装删除模块的方法

May 15 Javascript

element-ui table span-method(行合并)的实现代码

Dec 20 Javascript

Javascript 类型转换、封闭函数及常见内置对象操作示例

Nov 15 Javascript

详解JavaScript 中的批处理和缓存

Nov 19 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

广播爱好者需要了解的天线知识

2021/03/01 无线电

使用adodb lite解决问题

2006/12/31 PHP

php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码

2010/05/15 PHP

js 页面输出值

2008/11/30 Javascript

JavaScript 学习初步入门教程

2010/03/25 Javascript

写出高效jquery代码的19条指南

2014/03/19 Javascript

浅谈JavaScript异常处理语句

2015/06/26 Javascript

JavaScript如何动态创建table表格

2020/08/02 Javascript

Hammer.js+轮播原理实现简洁的滑屏功能

2016/02/02 Javascript

js仿百度音乐全选操作

2017/01/13 Javascript

Bootstrap Table使用整理(五)之分页组合查询

2017/06/09 Javascript

为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置

2019/09/29 Javascript

用javascript实现倒计时效果

2021/02/09 Javascript

[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试

2018/04/04 DOTA

使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子

2014/04/15 Python

Python一句代码实现找出所有水仙花数的方法

2018/11/13 Python

Python3爬虫之自动查询天气并实现语音播报

2019/02/21 Python

Python魔法方法功能与用法简介

2019/04/04 Python

Python Numpy 控制台完全输出ndarray的实现

2020/02/19 Python

浅谈Python中range与Numpy中arange的比较

2020/03/11 Python

Python3中FuzzyWuzzy库实例用法

2020/11/18 Python

python中PyQuery库用法分享

2021/01/15 Python

澳大利亚体育和露营装备在线/实体零售商：Find Sports

2020/06/03 全球购物

加拿大著名的奢侈品购物网站：SSENSE（支持中文）

2020/06/25 全球购物

采用怎样的方法保证数据的完整性

2013/12/02 面试题

线程问题：wait()方法是定义在哪个类里面

2015/07/07 面试题

Java如何读取CLOB字段

2013/10/10 面试题

主持人婚宴答谢词

2014/01/28 职场文书

教育技术学专业职业规划书

2014/03/03 职场文书

责任书格式范文

2014/07/28 职场文书

财务工作检讨书

2014/10/29 职场文书

房地产公司工程部经理岗位职责

2015/04/09 职场文书

同学聚会祝酒词

2015/08/10 职场文书

Java Socket实现Redis客户端的详细说明

2021/05/26 Redis

JPA如何使用entityManager执行SQL并指定返回类型

2021/06/15 Java/Android

Python Pandas pandas.read_sql_query函数实例用法分析

2021/06/21 Python