jQ实现三级导航

最新推荐文章于 2021-10-08 17:10:00 发布

JaniceDong

最新推荐文章于 2021-10-08 17:10:00 发布

阅读量867

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/Academia_zhen/article/details/77045433

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>数据导航及详细信息</title>
		<link rel="stylesheet" type="text/css" href="css/baozha.css" />
	</head>
	<body>
		<div id="nav">
			<ul class="first">
				<li class='first_li'>
					<a href='#'>资源1</a>
					<ul class='second'>
						<li class='second_li'>
							<a href='#'>资源1-1</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=0'>资源1-1-1</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=1'>资源1-1-2</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=2'>资源1-1-3</a>
								</li>
							</ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源1-2</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=3'>资源1-2-1</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=4'>资源1-2-2</a>
								</li>
							</ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源1-3</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=5'>资源1-3-1</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=6'>资源1-3-2</a>
								</li>
							</ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源1-4</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=7'>资源1-4-1</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=8'>资源1-4-2</a>
								</li>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=9'>资源1-4-3</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class='first_li'>
					<a href='#'>资源2</a>
					<ul class='second'>
						<li class='second_li'>
							<a href='#'>资源2-1</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=10'>资源2-1-1</a>
								</li>
							</ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源2-2</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=11'>资源2-2-1</a>
								</li>
							</ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源2-3</a>
							<ul class='third'></ul>
						</li>
						<li class='second_li'>
							<a href='#'>资源2-4</a>
							<ul class='third'>
								<li class='third_li'>
									<a href='/example_project/showFile/showFile.jsp?myFiles=12'>资源2-4-1</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class='first_li'>
					<a href='#'>资源3</a>
					<ul class='second'></ul>
				</li>
				<li class='first_li'>
					<a href='#'>资源4</a>
					<ul class='second'></ul>
				</li>
				<li class='first_li'>
					<a href='#'>资源5</a>
					<ul class='second'>
						<li class='second_li'>
							<a href='#'>资源5-1</a>
							<ul class='third'></ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/index.js"></script>
	</body>

</html>

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
	margin:0;padding:0;
	}
body{
	font:16px"微软雅黑","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;
	}
body,html{
		width: 100%;
		height: 100%;
	}
a{
	text-decoration:none;
	}
em{
	font-style:normal;
	}
li{
	list-style:none;
	}
img{
	border:0;vertical-align:middle;
	}
table{
	border-collapse:collapse;border-spacing:0;
	}
p{
	word-wrap:break-word;
	}
.nav_a{
	color:white;
	background: darkred;
}
#wrapper{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	background: #FFFFFF;
}
/*.head{
	width:100%;
	height: 100px;
	background:black;
}*/
#nav{
	width: 1200px;
	height: 100px;
	margin: 0 auto;
	background: black;
	text-align: center;
}
.first{
	width: 100%;
	height: 100%;
}
.first .first_li{
	width: 184px;
	height: 100%;
	list-style: none;
	float: left;
	position: relative;
}
.first .first_li a{
	display: inline-block;
	padding: 0 50px;
	color: white;
	text-decoration: none;	
	line-height: 100px;
	font-size: 18px;
}
.first .first_li .second{
	display: none;
	position: absolute;
	left: 0;
	top: 100px;
	width: 100%;
	background: black;
}
.second .second_li{
	position: relative;
}
.second .second_li a{
	display: inline-block;
	width: 100%;
	font-size: 18px;
	padding: 0;
	line-height: 40px;
}

.second .second_li .third{
	display:none;
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	background: black;
}
.third .third_li{
	position: relative;
}
.third .third_li a{
	display: inline-block;
	width: 100%;
	font-size: 18px;
	padding: 0;
	line-height: 40px;
}
a:hover{
	color: white;
	background: darkred;
}
.main{
	width: 100%;
	min-height:800px;
}
.main .m_wrap{
	width: 1200px;
	height: 100%;
	margin: 5px auto;
	min-height: 800px;
	border: 1px solid #CCCCCC;
}
.m_wrap .position{
	width: 100%;
	height: auto;
	padding: 10px 10px 20px;
}
.position div{
	width: 100%;
	line-height: 48px;
}
.position div p{
	display: inline-block;
	padding: 0 10px;
	color: #0061B1;
}
.position p a{
	color: #0061B1;;
}
.footer{
	width: 100%;
	height: 200px;
	background:black;
}
.footer .f_wrap{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	background:darkred;
}

window.onload = function(){
	$(function(){
		var _this1=null;
		//console.log($(".first>li"));
		$('.first>li').hover(function(){
			_this1=$(this);
			console.log(_this1.children(0).html());
			_this1.addClass("nav_a");
			_this1.find('.second').show();
			var _this2=null;
			_this1.find('.second').find('li').hover(function(){
				_this2=$(this);
				console.log(_this2.children(0).html());
				//_this2.addClass("nav_a");
				_this2.find('.third').show();
				_this2.find('.third').hover(function(){
					console.log($(this).children(0).html());
					$(this).show();
				},function(){
					$(this).hide();
				});
			},function(){
				_this2.find('.third').hide();
				//_this2.removeClass("nav_a");
			});
		},function(){
			_this1.find('.second').hide();
			_this1.removeClass("nav_a");
		});
	});
}