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 相关文章推荐
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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读取XML的常见方法实例总结
2017/04/25 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python 自动提交和抓取网页
2009/07/13 Python
python和pyqt实现360的CLable控件
2014/02/21 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
求职信怎么写
2014/05/23 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
如何理解python接口自动化之logging日志模块
2021/06/15 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
springboot读取resources下文件的方式详解
2022/06/21 Java/Android