jquery伸缩导航条点击向下展开菜单项

2024-09-05 12:20:53

字体：大中小

来源：转载

供稿：网友

基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整的JS、css和jquery部分。

<html><head><title>可折叠展开的导航条</title><style>body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"/5b8b/4f53","Arial Narrow";background:#fff;}form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}input,select{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}a {color:#00007F;text-decoration:none;}a:hover {color:#bd0a01;text-decoration:underline;}.box {width: 150px;margin: 0 auto;}.menu{overflow:hidden;border-color: #C4D5DF;border-style: solid;border-width: 0 1px 1px;}/* lv1 */.menu li.level1 a{display: block;height: 28px;line-height: 28px; background:#EBF3F8;font-weight:700;color: #5893B7;text-indent: 14px;border-top: 1px solid #C4D5DF;}.menu li.level1 a:hover{text-decoration:none;}.menu li.level1 a.current{background:#B1D7EF;}/* lv2 */.menu li ul{overflow:hidden;}.menu li ul.level2{display:none;}.menu li ul.level2 li a{display: block;height: 28px;line-height: 28px;background:#ffffff;font-weight:400;color: #42556B;text-indent: 18px;border-top: 0px solid #ffffff;overflow: hidden;}.menu li ul.level2 li a:hover{color:#f60;}</style><script src="http://www.vevb.com/ajaxjs/jquery-1.6.2.min.js"></script><script>$(document).ready(function(){	$(".level1 > a").click(function(){		$(this).addClass("current")  //给当前元素添加"current"样式		.next().show()  //下一个元素显示		.parent().siblings().children("a").removeClass("current")  //父元素的兄弟元素的子元素移除"current"样式		.next().hide();  //它们的下一个元素隐藏		return false;	});});</script></head><body><div class="box">	<ul class="menu">		<li class="level1">			衬衫			<ul class="level2">				<li>短袖衬衫</li>				<li>长袖衬衫</li>				<li>短袖T恤</li>				<li>长袖T恤</li>			</ul>		</li>		<li class="level1">			卫衣			<ul class="level2">				<li>开襟卫衣</li>				<li>套头卫衣</li>				<li>运动卫衣</li>				<li>童装卫衣</li>			</ul>		</li>		<li class="level1">			裤子			<ul class="level2">				<li>短裤</li>				<li>休闲裤</li>				<li>牛仔裤</li>				<li>免烫卡其裤</li>			</ul>		</li>	</ul></div></body></html>

上一篇：HTML css简洁导航条

下一篇：JS版网页顶部向下滑出的全国城市切换导航