本网页利用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 {
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>结果展示:
