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 浏览器验证代码(来自discuz)
Jul 17 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Djang中静态文件配置方法
2015/07/30 Python
Python单例模式实例详解
2017/03/01 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python__name__原理及用法详解
2019/11/02 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
货车司机岗位职责
2014/03/18 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
合同补充协议书
2016/03/24 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python