JQ 可展开折叠的导航

最新推荐文章于 2020-08-19 13:00:14 发布

iteye_17658

最新推荐文章于 2020-08-19 13:00:14 发布

阅读量231

点赞数

分类专栏：阅-JQ2 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_17658/article/details/82649614

版权

阅-JQ2 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

效果图:

iteye_17658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ 可展开折叠的导航

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;style&gt;*{ padding: 0; margin: 0;}li{ lis
复制链接

扫一扫