jQuery实现可展开折叠的导航效果示例


Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery实现可展开折叠的导航效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px; font-family:\5FAE\8F6F\96C5\9ED1,'Arial';}
a{ text-decoration: none; color:#f00;}
h3{ cursor: pointer;}
</style>
</head>
<body>
<h3>导航一</h3>
<ul style="display:none">
  <li><a href="#">11111</a></li>
  <li><a href="#">11111</a></li>
  <li><a href="#">11111</a></li>
  <li><a href="#">11111</a></li>
</ul>
<h3>导航二</h3>
<ul style="display:none">
  <li><a href="#">22222</a></li>
  <li><a href="#">22222</a></li>
  <li><a href="#">22222</a></li>
  <li><a href="#">22222</a></li>
</ul>
<h3>导航三</h3>
<ul style="display:none">
  <li><a href="#">33333</a></li>
  <li><a href="#">33333</a></li>
  <li><a href="#">33333</a></li>
  <li><a href="#">33333</a></li>
</ul>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(function(){
  $.easing.def = 'easeOutElastic';
  var oBtn = $('h3');
  oBtn.click(function(){
    $(this).next('ul').slideToggle().siblings('ul').slideUp();
  });
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现可展开折叠的导航效果示例

附:jquery.easing.1.3.js动画效果扩展插件可点击如下链接本站下载:

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

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
js实现图片放大展示效果
Aug 30 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 #Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 #Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 #Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
You might like
php调用新浪短链接API的方法
2014/11/08 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
Node.js 的模块知识汇总
2017/08/16 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
shiro授权的实现原理
2017/09/21 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
python赋值操作方法分享
2013/03/23 Python
python实现调用其他python脚本的方法
2014/10/05 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
初三学习决心书
2014/03/11 职场文书
房地产广告词大全
2014/03/19 职场文书
党代会心得体会
2014/09/04 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
债务纠纷代理词
2015/05/25 职场文书
无房证明样本
2015/06/17 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android