jq垂直下拉菜单

最新推荐文章于 2021-07-07 13:48:36 发布

tingyeyu

最新推荐文章于 2021-07-07 13:48:36 发布

阅读量502

点赞数

分类专栏： jQuery 文章标签： jquery 垂直导航

本文链接：https://blog.csdn.net/tingyeyu/article/details/51301918

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

效果如图：