基于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 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
详解webpack 最简打包结果分析
Feb 20 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
杏林同学录(六)
2006/10/09 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
Javascript 对象的解释
2008/11/24 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python 实现性别识别
2020/11/21 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
struct和class的区别
2015/11/20 面试题
了解AppleTalk协议吗
2014/04/01 面试题
2014年工商所工作总结
2014/12/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
企业投资意向书
2015/05/09 职场文书
报案材料怎么写
2015/05/25 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫