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

JQuery 获取和设置Select选项的代码

Feb 07 Javascript

分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

Dec 15 Javascript

jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

Aug 25 Javascript

javascript的正则匹配方法学习

Feb 24 Javascript

内容滑动切换效果jquery.hwSlide.js插件封装

Jul 07 Javascript

js实现点击按钮弹出上传文件的窗口

Dec 23 Javascript

老生常谈js-react组件生命周期

May 02 Javascript

Vue无限滑动周选择日期的组件的示例代码

Jul 18 Javascript

webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

Jun 10 Javascript

vue封装可复用组件confirm,并绑定在vue原型上的示例

Oct 31 Javascript

Ant Design Pro 下实现文件下载的实现代码

Dec 03 Javascript

JS实现音乐钢琴特效

Jan 06 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下foreach提示Warning:Invalid argument supplied for foreach()的解决方法

2014/11/11 PHP

php+xml结合Ajax实现点赞功能完整实例

2015/01/30 PHP

Smarty foreach控制循环次数的一些方法

2015/07/01 PHP

PHP使用CURL模拟登录的方法

2015/07/08 PHP

php判断手机浏览还是web浏览,并执行相应的动作简单实例

2016/07/28 PHP

PHP针对多用户实现更换头像功能

2016/09/04 PHP

网页整体变灰白色(兼容各浏览器)实例

2013/04/21 Javascript

JS实现两个大数(整数)相乘

2014/04/28 Javascript

css与javascript跨浏览器兼容性总结

2014/09/15 Javascript

jQuery实用技巧必备（上）

2015/11/02 Javascript

js实现无缝循环滚动

2020/06/23 Javascript

JS组件系列之使用HTML标签的data属性初始化JS组件

2016/09/14 Javascript

AngularJs入门教程之环境搭建+创建应用示例

2016/11/01 Javascript

JavaScript中校验银行卡号的实现代码

2016/12/19 Javascript

js中less常用的方法小结

2017/08/09 Javascript

详解js几个绕不开的事件兼容写法

2017/08/30 Javascript

详解如何写出一个利于扩展的vue路由配置

2019/05/16 Javascript

基于Proxy的小程序状态管理实现

2019/06/14 Javascript

python 正则表达式概述及常用字符

2009/05/04 Python

使用Python读写及压缩和解压缩文件的示例

2016/07/08 Python

Pandas 对Dataframe结构排序的实现方法

2018/04/10 Python

numpy使用fromstring创建矩阵的实例

2018/06/15 Python

在python中将list分段并保存为array类型的方法

2019/07/15 Python

python的pyecharts绘制各种图表详细（附代码）

2019/11/11 Python

TensorFlow tensor的拼接实例

2020/01/19 Python

Python ellipsis 的用法详解

2020/11/20 Python

Omio法国：全欧洲低价大巴、火车和航班搜索和比价

2017/11/13 全球购物

JDO的含义

2012/11/17 面试题

《会变的花树叶》教学反思

2014/02/10 职场文书

网络信息安全承诺书

2014/03/26 职场文书

异地年检委托书范本

2014/09/24 职场文书

2015年秘书个人工作总结

2015/04/25 职场文书

在校证明模板

2015/06/17 职场文书

坚持不是死撑，更重要的是心态

2019/08/19 职场文书

HTML5简单实现添加背景音乐的几种方法

2021/05/12 HTML / CSS

Nginx location 和 proxy_pass路径配置问题小结

2021/09/04 Servers