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

StringTemplate遇见jQuery冲突的解决方法

Sep 22 Javascript

Javascript中的delete介绍

Sep 02 Javascript

EXTjs4.0的store的findRecord的BUG演示代码

Jun 08 Javascript

javascript模拟评分控件实现方法

May 13 Javascript

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法

Aug 08 Javascript

利用React-router+Webpack快速构建react程序

Oct 27 Javascript

JS中检测数据类型的几种方式及优缺点小结

Dec 12 Javascript

vue.js获得当前元素的文字信息方法

Mar 09 Javascript

详解Vue 全局变量，局部变量

Apr 17 Javascript

webpack + vue 打包生成公共配置文件（域名）方便动态修改

Aug 29 Javascript

vue使用一些外部插件及样式的配置代码

Nov 18 Javascript

解决vue prop传值default属性如何使用,为何不生效的问题

Sep 21 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 输出缓冲控制(Output Control)详解

2016/08/25 PHP

PHP如何使用JWT做Api接口身份认证的实现

2020/02/03 PHP

Jquery 高亮显示文本中重要的关键字

2009/12/24 Javascript

javascript 验证日期的函数

2010/03/18 Javascript

仿jQuery的siblings效果的js代码

2011/08/09 Javascript

JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

2013/12/14 Javascript

JavaScript中的正则表达式简明总结

2014/04/04 Javascript

javascript数组去重的六种方法汇总

2015/08/16 Javascript

javascript实现抽奖程序的简单实例

2016/06/07 Javascript

nodejs的压缩文件模块archiver用法示例

2017/01/18 NodeJs

JavaScript实现定时页面跳转功能示例

2017/02/14 Javascript

JavaScript与JQUERY获取元素的宽、高和位置

2017/02/26 Javascript

详解angular中的作用域及继承

2017/05/31 Javascript

ES6 Array常用扩展的应用实例分析

2019/06/26 Javascript

详解ES6 Promise的生命周期和创建

2019/08/18 Javascript

JavaScript计算正方形面积

2019/11/26 Javascript

基于JavaScript获取url参数2种方法

2020/04/17 Javascript

使用Element的InfiniteScroll 无限滚动组件报错的解决

2020/07/27 Javascript

如何在VUE中使用vue-awesome-swiper

2021/01/04 Vue.js

Python使用CMD模块更优雅的运行脚本

2015/05/11 Python

Python验证码识别处理实例

2015/12/28 Python

使用py2exe在Windows下将Python程序转为exe文件

2016/03/04 Python

python数据抓取分析的示例代码（python + mongodb）

2017/12/25 Python

Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解

2019/06/04 Python

详解Python3中setuptools、Pip安装教程

2019/06/18 Python

python读取并写入mat文件的方法

2019/07/12 Python

Python namedtuple命名元组实现过程解析

2020/01/08 Python

解决django 向mysql中写入中文字符出错的问题

2020/05/18 Python

Django haystack实现全文搜索代码示例

2020/11/28 Python

HTML5拍照和摄像机功能实战详解

2019/01/24 HTML / CSS

Foot Locker澳洲官网：美国运动服和鞋类零售商

2019/10/11 全球购物

物流管理毕业生自荐信范文

2014/03/15 职场文书

房产委托公证书样本

2014/04/04 职场文书

搞笑车尾标语

2014/06/23 职场文书

三严三实·严以律己心得体会

2016/01/13 职场文书

关于windows server 2012 DC 环境重启后蓝屏代码:0xc00002e2的问题

2022/05/25 Servers