Jquery实现简单的导航单并且经常使用

本网页利用Jquery实现一个简单并且常用的导航栏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="Jquery/jquery.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
				font-size: 24px;
				font-family: "微软雅黑";
			}
			
			ul,
			li {
				list-style-type: none;
			}
			
			a {
				color: #00007F;
				text-decoration: none;
			}
			
			a:hover {
				color: #bd0a01;
				text-decoration: underline;
			}
			
			.box {
				width: 200px;
				margin: 0 auto;
			}
			
			.menu li ul.level2 {
				display: none;
			}
			
			.menu li ul.level2 li a {
				display: block;
				height: 28px;
				line-height: 28px;
				background: #ffffff;
				font-weight: 400;
				color: #42556B;
				text-indent: 18px;
				border-top: 0px solid #ffffff;
				overflow: hidden;
			}
		</style>
	</head>


	<body>
		<div class="box">
			<ul class="menu">
				<li class="level1">
					<a href="#none">鞋子</a>
					<ul class="level2">
						<li>
							<a href="#none">阿迪达斯</a>
						</li>
						<li>
							<a href="#none">耐克</a>
						</li>
						<li>
							<a href="#none">Newbalance</a>
						</li>
						<li>
							<a href="#none">李宁</a>
						</li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">外套</a>
					<ul class="level2">
						<li>
							<a href="#none">美特斯邦威</a>
						</li>
						<li>
							<a href="#none">以纯</a>
						</li>
						<li>
							<a href="#none">森马</a>
						</li>
						<li>
							<a href="#none">东方骆驼</a>
						</li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">裤子</a>
					<ul class="level2">
						<li>
							<a href="#none">七分裤</a>
						</li>
						<li>
							<a href="#none">休闲裤</a>
						</li>
						<li>
							<a href="#none">牛仔裤</a>
						</li>
						<li>
							<a href="#none">五分裤</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
Jquery实现部分:
		<script>
			$(document).ready(function() {
				$(".level1 > a").click(function() {
					$(this).next().show().parent().siblings().children("a").next().hide(); //它们的下一个元素隐藏
				});
			});
		</script>
	</body>
</html>


结果展示:

posted @ 2017-06-15 22:58  Jonny-Xhl  阅读(91)  评论(0编辑  收藏  举报