基于jQuery实现以手风琴方式展开和折叠导航菜单


Posted in Javascript onJanuary 28, 2016

本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果。

代码实例如下:

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">三水点靠木一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">三水点靠木二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">三水点靠木</a></li>
  </ul>
 </dd>
 <dt><a href="#">三水点靠木三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$("dd:not(:first)").hide(),除第一个dd元素之外的所有dd元素隐藏,就是第一个导航菜单的子菜单是展开的,其他隐藏。
(3).$("dt a").click(function(){}),为dt元素下的a元素注册click事件处理函数。
(4).$("dd:visible").slideUp("slow"),所有已经显示的dd元素通过动画方式收缩隐藏。
(5).$(this).parent().next().slideDown("slow"),当前连接a元素的父元素也就是dt元素,dt元素的下一个元素就是二级菜单dd元素,将此菜单以动画方式展开。
(6).return false,这个很重要,防止链接的跳转动作。

以上所述是小编给大家分享基于jQuery实现以手风琴方式展开和折叠导航菜单,希望对大家有所帮助。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 #Javascript
js+canvas绘制矩形的方法
Jan 28 #Javascript
js+canvas简单绘制圆圈的方法
Jan 28 #Javascript
谈一谈javascript闭包
Jan 28 #Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 #Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 #Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 #Javascript
You might like
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
Ext 今日学习总结
2010/09/19 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python 解析xml文件的示例
2020/09/29 Python
给医务人员表扬信
2014/01/12 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
数学教育专业求职信
2014/07/22 职场文书
诉讼授权委托书
2014/10/15 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
费城故事观后感
2015/06/10 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server