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

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

Posted in Javascript onSeptember 21, 2015

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

 基于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宝典学习笔记（上）
Jan 10 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
详解JS中的attribute属性
Apr 25 Javascript
微信小程序的分类页面制作
Jun 27 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
FTP服务器(1) GZIP(2) .NET Framework(2) DBLink(1) 幻读(5) 复读(1) DNS服务器(2) IIS7(1) 磁盘分区(1) 事务并发(1)
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
vue3.0 加载json的方法（非ajax）
2020/10/26 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python自定义异常实例详解
2017/07/11 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
简单了解python协程的相关知识
2019/08/31 Python
python同义词替换的实现（jieba分词）
2020/01/21 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python 中的命名空间，你真的了解吗？
2020/08/19 Python
合伙协议书
2014/04/23 职场文书
门卫岗位职责
2015/02/09 职场文书
家长对孩子的寄语
2015/02/26 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
追讨欠款律师函
2015/06/24 职场文书
祝福语集锦：送给毕业同学祝福语
2019/11/21 职场文书