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>
 

效果如图:



目录
相关文章
|
9月前
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
93 0
|
9天前
|
移动开发 小程序 JavaScript
uView ScrollList 横向滚动列表
uView ScrollList 横向滚动列表
15 0
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
5月前
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
90 0
|
JavaScript
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
505 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
CSS3垂直图标菜单
在线演示 本地下载
819 0
CSS3带小图标垂直下拉菜单
在线演示 本地下载
1095 0
|
JavaScript
jQuery多层级垂直手风琴菜单
在线演示 本地下载
1072 0
|
JavaScript