jq垂直下拉菜单

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

效果如图所示:

jq垂直下拉菜单

最后加入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>


效果如图:

jq垂直下拉菜单

上一篇:文章资源下载小程序(以Serverless WordPress为后端)的基础配置


下一篇:IOS小技能:应用上架材料的准备及打包注意事项