编程 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 相关文章推荐

一些经常会用到的Javascript检测函数

May 31 Javascript

node.js中格式化数字增加千位符的几种方法

Jul 03 Javascript

Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

Aug 21 Javascript

检查表单元素的值是否为空的实例代码

Jun 16 Javascript

浅析jQuery Ajax通用js封装

Jun 22 Javascript

使用DeviceOne实现微信小程序功能

Dec 29 Javascript

纯js实现页面返回顶部的动画(超简单)

Aug 10 Javascript

JS+WCF实现进度条实时监测数据加载量的方法详解

Dec 19 Javascript

vue-image-crop基于Vue的移动端图片裁剪组件示例

Aug 28 Javascript

Vue 通过自定义指令回顾v-内置指令(小结)

Sep 03 Javascript

node.JS二进制操作模块buffer对象使用方法详解

Feb 06 Javascript

vue实现用户长时间不操作自动退出登录功能的实现代码

Jul 23 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