jq垂直下拉菜单-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jq垂直下拉菜单

简介: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq测试</title> </head> <body> <div id="nav1"> <div class="dcls"&gt
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq测试</title>
</head>
<body>
	<div id="nav1">
		<div class="dcls">
			<h3 class="hcls">aa000001</h3>
				<ul class="ucls">
					<li>第一个01</li>
					<li>第一个01</li>
					<li>第一个01</li>
				</ul>

			<h3 class="hcls">aa000002</h3>
				<ul class="ucls">
					<li>第一个02</li>
					<li>第一个02</li>
					<li>第一个02</li>
				</ul>

			<h3 class="hcls">aa000003</h3>
				<ul class="ucls">
					<li>第一个03</li>
					<li>第一个03</li>
					<li>第一个03</li>
				</ul>
		</div>
	</div>
</body>

</html>

书写好html内容然后引入jQuery和css样式

<script src="jquery 2.1.4.js"></script>
<link rel="stylesheet" href="style.css">
样式内容如下:
		body{
			margin: 0;
			padding: 0;
		}
		.ucls{
			list-style: none;
			display: none;
			clear: both;
		}
		.ucls li{
			width: 200px;
			height: 30px;
			line-height: 30px;
			background: #c0c;
			margin: 2px;
			text-align: center;
		}
		.dcls{
			width: 200px;
		}
		.hcls{
			width: 200px;
			height: 40px;
			line-height: 40px;
			background: #ccc;
			margin: 2px;
			padding: 0;
			float: left;
			text-align: center;
			cursor: pointer;
		}

效果如图所示:

最后加入js代码:

<script type="text/javascript">
	$('.ucls').eq(0).css('display','block');  <span style="white-space:pre">					</span>//打开页面时展开第一个导航栏子菜单
	$('.hcls').each(function(i){
			$(this).click(function(){
			$('.ucls').eq(i).slideDown(800).siblings('ul').slideUp(800);<span style="white-space:pre"></span><pre name="code" class="javascript"> <span style="white-space:pre">										</span>//点击导航栏时展开对应的导航栏子菜单,并收起其他的子菜单
});});</script>


效果如图:



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章