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

javascript 事件绑定问题

Jan 01 Javascript

ie8 不支持new Date(2012-11-10)问题的解决方法

Jul 31 Javascript

分享20个提升网站界面体验的jQuery插件

Dec 15 Javascript

js实现的页面矩阵图形变换特效

Jan 26 Javascript

bootstrap-datetimepicker实现只显示到日期的方法

Nov 25 Javascript

Ext JS 实现建议词模糊动态搜索功能

May 13 Javascript

JS对象序列化成json数据和json数据转化为JS对象的代码

Aug 23 Javascript

浅谈从React渲染流程分析Diff算法

Sep 08 Javascript

elementUI 设置input的只读或禁用的方法

Oct 30 Javascript

如何使用less实现随机下雪动画详解

Jan 02 Javascript

vue-cli2与vue-cli3在一台电脑共存的实现方法

Sep 25 Javascript

微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

Dec 17 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实现框架（二）

2006/10/09 PHP

php判断字符串在另一个字符串位置的方法

2014/02/27 PHP

PHP简单实现HTTP和HTTPS跨域共享session解决办法

2015/05/27 PHP

php登录超时检测功能实例详解

2017/03/21 PHP

ie8 不支持new Date(2012-11-10)问题的解决方法

2013/07/31 Javascript

弹出窗口并且此窗口带有半透明的遮罩层效果

2014/03/13 Javascript

JS实现窗口加载时模拟鼠标移动的方法

2015/06/03 Javascript

jQuery热气球动画半透明背景的后台登录界面代码分享

2015/08/28 Javascript

jQuery使用中可能被XSS攻击的一些危险环节提醒

2016/05/24 Javascript

遍历json获得数据的几种方法小结

2017/01/21 Javascript

Vue.js原理分析之observer模块详解

2017/02/17 Javascript

jQuery实现单击按钮遮罩弹出对话框效果（1）

2017/02/20 Javascript

js实现图片推拉门效果代码实例

2019/05/18 Javascript

vue 翻页组件vue-flip-page效果

2020/02/05 Javascript

[01:33:59]真人秀《加油 DOTA》第六期

2014/09/09 DOTA

[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2

2018/06/03 DOTA

python实现数独算法实例

2015/06/09 Python

Python每天必学之bytes字节

2016/01/28 Python

Python抓取框架 Scrapy的架构

2016/08/12 Python

python 网络编程常用代码段

2016/08/28 Python

python中ASCII码字符与int之间的转换方法

2018/07/09 Python

解决Numpy中sum函数求和结果维度的问题

2019/12/06 Python

python实现银行实战系统

2020/02/26 Python

Numpy中ndim、shape、dtype、astype的用法详解

2020/06/14 Python

如何让python的运行速度得到提升

2020/07/08 Python

Html5 web本地存储实例详解

2016/07/28 HTML / CSS

澳大利亚在线划船、露营和钓鱼商店：BCF Australia

2020/03/22 全球购物

Currentbody德国站：健康与美容技术专家

2020/04/05 全球购物

网络工程师专家职业发展路线

2014/02/14 职场文书

初三学生个人自我评定

2014/04/06 职场文书

分家协议书

2014/04/21 职场文书

学校师德承诺书

2014/05/23 职场文书

安全教育主题班会教案

2015/08/12 职场文书

再次探讨go实现无限 buffer 的 channel方法

2021/06/13 Golang

Java后端 Dubbo retries 超时重试机制的解决方案

2022/04/14 Java/Android

Python3使用Qt5来实现简易的五子棋小游戏

2022/05/02 Python