<!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.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实现可展开折叠的导航效果。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
主要介绍了基于jQuery实现以手风琴方式展开和折叠导航菜单的相关资料,需要的朋友可以参考下
人称“手风琴菜单”，因为可以像手风琴那样拉开或收缩起来，用鼠标点击竖向排列的图片，该图片可展开显示，并出现文字说明，类似菜单在jquery中是一个典型应用，用jQ实现折叠菜单非常方便。
jQuery展开收缩树形菜单代码是一款带搜索功能的，可以直接查询菜单列表，树形菜单代码。
jquery二级导航，二级横向导航，展开或者折叠的时候，支持左右滑动效果
需求是, 同一个页面, 有多组(不... 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系, 写的也比较零散, 就没有封装. 其实, 对这种思路也不是很满意, 感觉太散了, 哪位大师有更好的思
一个特殊的导航菜单，要结合outlook式与树形想结合的菜单。具体要求如下： 1、菜单分两级，但是并不是每个一级栏目都有二级，如果没有二级栏目，则不需要折叠； 2、每级栏目标题上都需要链接一个网页地址，这与...
本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下： 这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标...可折叠展开的导航条</
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢...
由于其拥有庞大，实用的插件库，使得jQuery变得越来越流行。...它将一个无序列表转换成一个可扩展和可折叠的树，非常适合导航增强。 示例 jsTree – jQuery Tree Plugin jsTree 是一个基于Javascript，支持
本文介绍一种比较常见的导航菜单是如何实现的，它具有垂直结构，点击导航主标题可以展开或者折叠二级菜单。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <title&...