jquery实现简单手风琴菜单效果实例


Posted in Javascript onJune 13, 2015

本文实例讲述了jquery实现简单手风琴菜单效果的方法。分享给大家供大家参考。具体实现方法如下:

(function($) {
 var allPanels = $('.accordion > dd').hide();
 $('.accordion > dt > a').click(function() {
  allPanels.slideUp();
  $(this).parent().next().slideDown();
  return false;
 });
})(jQuery);

HTML代码:

<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>

SCSS部分:

/* Sorry if you don't use SASS. Should be pretty easy to convert. */
.accordion {
  margin: 50px; 
  dt, dd {
   padding: 10px;
   border: 1px solid black;
   border-bottom: 0;
   &:last-of-type {
    border-bottom: 1px solid black;
   }
   a {
    display: block;
    color: black;
    font-weight: bold;
   }
  }
 dd {
   border-top: 0;
   font-size: 12px;
   &:last-of-type {
    border-top: 1px solid white;
    position: relative;
    top: -1px;
   }
 }
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
js实现文字截断功能
Sep 14 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
jQuery实现的五子棋游戏实例
Jun 13 #Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 #Javascript
JQuery自动触发事件的方法
Jun 13 #Javascript
JQuery中DOM实现事件移除的方法
Jun 13 #Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Pycharm调试程序技巧小结
2020/08/08 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Ajax的工作原理
2015/12/04 面试题
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
大学生评语大全
2014/04/18 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL