编程 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入门基础之私有变量

Feb 23 Javascript

JS高级笔记

Jul 13 Javascript

学习从实践开始之jQuery插件开发菜单插件开发

May 03 Javascript

JavaScript中判断变量是数组、函数或是对象类型的方法

Feb 25 Javascript

JQuery+EasyUI轻松实现步骤条效果

Feb 22 Javascript

javascript创建对象、对象继承的实用方式详解

Mar 08 Javascript

JS获得多个同name 的input输入框的值的实现方法

Jan 09 Javascript

Bootstarp基本模版学习教程

Feb 01 Javascript

VUE页面中加载外部HTML的示例代码

Sep 20 Javascript

Vue底层实现原理总结

Feb 17 Javascript

fetch 如何实现请求数据

Dec 20 Javascript

原生JS实现贪吃蛇小游戏

Mar 09 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学习笔记数组的常用函数

2011/06/13 PHP

php中url传递中文字符,特殊危险字符的解决方法

2013/08/17 PHP

PHP构造函数与析构函数用法示例

2016/09/28 PHP

JavaScript 继承详解（三）

2009/07/13 Javascript

多个jquery.datatable共存,checkbox全选异常的快速解决方法

2013/12/10 Javascript

jQuery中验证表单提交方式及序列化表单内容的实现

2014/01/06 Javascript

基于Jquery和html5的7款个性化地图插件

2015/11/17 Javascript

分享纯手写漂亮的表单验证

2015/11/19 Javascript

JS中JSON对象和String之间的互转及处理技巧

2016/04/06 Javascript

jQuery简单实现仿京东分类导航层效果

2016/06/07 Javascript

arcgis for js 修改infowindow样式的方法

2016/11/02 Javascript

基于Angularjs+mybatis实现二级评论系统(仿简书)

2017/02/13 Javascript

vue.js开发环境安装教程

2017/03/17 Javascript

详解JavaScript调用栈、尾递归和手动优化

2017/06/03 Javascript

JS判断非空至少输入两个字符的简单实现方法

2017/06/23 Javascript

js编写简单的计时器功能

2017/07/15 Javascript

详解JavaScript 中 if / if...else...替换方式

2018/07/15 Javascript

Node.js Buffer模块功能及常用方法实例分析

2019/01/05 Javascript

Bootstrap4 gulp 配置详解

2019/01/06 Javascript

手把手教你使用TypeScript开发Node.js应用

2019/05/06 Javascript

Typescript3.9 常用新特性一览(推荐)

2020/05/14 Javascript

[07:26]2015国际邀请赛第二日TOP10集锦

2015/08/06 DOTA

Python的Twisted框架中使用Deferred对象来管理回调函数

2016/05/25 Python

django+js+ajax实现刷新页面的方法

2017/05/22 Python

Python2实现的LED大数字显示效果示例

2017/09/04 Python

解决pycharm运行时interpreter为空的问题

2018/10/29 Python

python可视化实现KNN算法

2019/10/16 Python

实列教程一款基于jquery和css3的响应式二级导航菜单

2014/11/13 HTML / CSS

梅西百货官网：Macy’s

2020/08/04 全球购物

社区健康教育实施方案

2014/03/18 职场文书

有子女的离婚协议书怎么写（范本）

2014/09/29 职场文书

2014年党的群众路线学习心得体会

2014/11/05 职场文书

2014年助理工程师工作总结

2014/11/14 职场文书

党校个人总结

2015/03/04 职场文书

2016党员干部反腐倡廉心得体会

2016/01/13 职场文书

机关干部纪律作风整顿心得体会

2016/01/23 职场文书