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

通过修改referer下载文件的方法

May 11 Javascript

添加JavaScript重载函数的辅助方法2

Jul 04 Javascript

JS实现新浪博客左侧的Blog管理菜单效果代码

Oct 22 Javascript

JavaScript为事件句柄绑定监听函数实例详解

Dec 15 Javascript

浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

Feb 14 Javascript

JS简单实现获取元素的封装操作示例

Apr 07 Javascript

利用Jasmine对Angular进行单元测试的方法详解

Jun 12 Javascript

js学习总结之DOM2兼容处理重复问题的解决方法

Jul 27 Javascript

js遍历添加栏目类添加css 再点击其它删除css【推荐】

Jun 12 Javascript

微信小程序的部署方法步骤

Sep 04 Javascript

Javascript实现贪吃蛇小游戏（含详细注释）

Oct 23 Javascript

js实现简易拖拽的示例

Oct 26 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

4月1日重磅发布！《星际争霸II》6.0.0版本更新

2020/04/09 星际争霸

PHP新手上路（十）

2006/10/09 PHP

关于Intype一些小问题的解决办法

2008/03/28 PHP

使用PHP获取网络文件的实现代码

2010/01/01 PHP

sphinx增量索引的一个问题

2011/06/14 PHP

php使用qr生成二维码的示例分享

2014/01/20 PHP

php实现读取内存顺序号

2015/03/29 PHP

thinkPHP分组后模板无法加载问题解决方法

2016/07/12 PHP

全面解析PHP操作Memcache基本函数

2016/07/14 PHP

yii2.0整合阿里云oss删除单个文件的方法

2017/09/19 PHP

javascript断点调试心得分享

2016/04/23 Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

2016/12/08 Javascript

JS之if语句对接事件动作逻辑(详解)

2017/06/28 Javascript

node 利用进程通信实现Cluster共享内存

2017/10/27 Javascript

JavaScript异步加载问题总结

2018/02/17 Javascript

解决layui的radio属性或别的属性没显示出来的问题

2019/09/26 Javascript

[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日

2021/03/11 DOTA

python解决Fedora解压zip时中文乱码的方法

2016/09/18 Python

PyQt5每天必学之拖放事件

2020/08/27 Python

selenium+python 对输入框的输入处理方法

2018/10/11 Python

Pytest参数化parametrize使用代码实例

2020/02/22 Python

PyCharm License Activation激活码失效问题的解决方法(图文详解)

2020/03/12 Python

浅谈keras通过model.fit_generator训练模型(节省内存)

2020/06/17 Python

python 字符串格式化的示例

2020/09/21 Python

Grid 宫格常用布局的实现

2020/01/10 HTML / CSS

解析html5 canvas实现背景鼠标连线动态效果代码

2019/06/17 HTML / CSS

通往英国高街的商店橱窗：Down Your High Street

2020/07/19 全球购物

一套Delphi的笔试题二

2013/05/11 面试题

PyQt 如何创建自定义QWidget

2021/03/24 Python

应届生人事助理求职信

2013/11/09 职场文书

工商管理实习生自我鉴定范文

2013/12/18 职场文书

心理健康心得体会

2014/01/02 职场文书

2014年父亲节活动方案

2014/03/06 职场文书

检举信的格式及范文

2014/04/04 职场文书

学生自我鉴定格式及范文

2014/09/16 职场文书

世界环境日活动总结

2015/02/11 职场文书