编程 Javascript

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.easing.1.3.js动画效果扩展插件可点击如下链接本站下载：

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

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

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键的javascript代码

Apr 01 Javascript

Lazy Load 延迟加载图片的jQuery插件中文使用文档

Oct 18 Javascript

基于jquery DOM写的类似微博发布的效果

Oct 20 Javascript

用javascript模仿ie的自动完成类似自动完成功的表单

Dec 12 Javascript

node在两个div之间移动,用ztree实现

Mar 06 Javascript

js中window.open的参数及注意注意事项

Jul 06 Javascript

jquery实用技巧之输入框提示语句

Jul 28 Javascript

AngularJS 基础ng-class-even指令用法

Aug 01 Javascript

关于jQuery中fade(),show()起始位置的一点小发现

Apr 25 jQuery

JavaScript之Date_动力节点Java学院整理

Jun 28 Javascript

解决vue keep-alive 数据更新的问题

Sep 21 Javascript

JavaScript实现无限级递归树的示例代码

Mar 29 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