首页 > 代码库 > 前端树状菜单
前端树状菜单
因为突然间用到这个东西，但是也不清楚别人是怎么做的，就自己根据自己的想法来了，效果还不错、
先思路，后代码：
思路：两个ul嵌套，把外层的ul显示出来，里层的ul先用样式表隐藏，当点击的时候，当前li下的ul状态更改为显示，就可以了
当点击其他的时候，先把外层li下所有的ul样式全为隐藏，然后再显示当前下的ul，大体思路就是这样
代码：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
li{list-style-type: none; float: left;}
.u{width: 120px;}
.u .tre{font-size: 18px; line-height: 22px;}
.u .tre .l{width: 120px; height: 20px;}
.u .tre .sub{display: none; width: 70px;}
.u .tre .sub li{font-size: 14px; line-height: 18px; float: left;}
</style>
</head>
<body>
<ul>
<li>
<div>
<a href="http://www.mamicode.com/#">青龙</a>
</div>
<ul>
<li>小青龙</li>
<li>小青龙</li>
</ul>
</li>
<li>
<div>
<span>白虎</span>
</div>
<ul>
<li>小白虎</li>
<li>小白虎</li>
</ul>
</li>
<li>
<div>
<span>朱雀</span>
</div>
<ul>
<li>小朱雀</li>
<li>小朱雀</li>
</ul>
</li>
<li>
<div>
<span>玄武</span>
</div>
<ul>
<li>小玄武</li>
<li>小玄武</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(".l").click(function(){
$(".sub").hide();
$(this).parent().find(".sub").show();
});
</script>
</body>
</html>
具体样式什么的，自己去调，这个是竖着的，横着的，和这个类似，定一下位应该就成
今天状态不佳，又犯了个错， Js代码放在head中， 就说没反应， 真是醉了。。。
前端树状菜单