<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>jquery垂直弹性下拉二级菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{margin:0 auto;width:200px;border:1px solid red;}
body{font-size:14px;}
li{list-style:none;border-bottom:1px solid #000000;}
a{text-decoration:none;display:block;background:#ccc;height:30px;line-height:30px;padding-left:6px;}
.current{background:red;}
.level2{display:none;}
</style>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$(".level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a")
.removeClass("current").next().hide();
})
})
});
</script>
</head>
<body>
<div class="box">
<ul>
<li class="level1">
<a href="#">我是第一</a>
<ul class="level2">
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">111111</a></li>
<li><a href="#">11111</a></li>
</ul>
</li>
<li class="level1">
<a href="#">我是第二</a>
<ul class="level2">
<li><a href="#">2222222</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">222222</a></li>
</ul>
</li>
<li class="level1">
<a href="#">我是第三</a>
<ul class="level2">
<li><a href="#">33333333</a></li>
<li><a href="#">333333</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">3333333</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>jquery垂直弹性下拉二级菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{margin:0 auto;width:200px;border:1px solid red;}
body{font-size:14px;}
li{list-style:none;border-bottom:1px solid #000000;}
a{text-decoration:none;display:block;background:#ccc;height:30px;line-height:30px;padding-left:6px;}
.current{background:red;}
.level2{display:none;}
</style>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$(".level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a")
.removeClass("current").next().hide();
})
})
});
</script>
</head>
<body>
<div class="box">
<ul>
<li class="level1">
<a href="#">我是第一</a>
<ul class="level2">
<li><a href="#">1111</a></li>
<li><a href="#">1111</a></li>
<li><a href="#">111111</a></li>
<li><a href="#">11111</a></li>
</ul>
</li>
<li class="level1">
<a href="#">我是第二</a>
<ul class="level2">
<li><a href="#">2222222</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">222222</a></li>
</ul>
</li>
<li class="level1">
<a href="#">我是第三</a>
<ul class="level2">
<li><a href="#">33333333</a></li>
<li><a href="#">333333</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">3333333</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
