前几天被问到如何实现树形菜单，之后百度一下，学了两种比较简单易理解的方法，一种是用Jquery写，另一种时用插件解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery树形菜单</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{ margin:0;padding:0; }
ul li{ list-style: none; }
a{ text-decoration: none; }
#warp{ width: 300px;overflow: hidden;border:1px solid #dadada; }
.nav-first,.nav-second,.nav-three{
margin-left: 20px;
}
#warp i{width: 15px;height: 15px;float:left;margin-right: 10px;background:url('img/add.jpg')no-repeat 0 0 ; }
#warp a{display:block; font-size:14px; height:20px; padding:3px 0; color:#666; overflow:hidden;}
.nav-three li{ background: url('img/dot.jpg')no-repeat 0 12px;padding-left: 10px;}
#warp .fold i{ width: 15px;height: 15px;float:left;margin-right: 10px;background:url('img/jian.jpg')no-repeat 0 0 ; }
#warp .fold{ display:none; }
</style>
<script>
$(function(){
$('.item-1').click(function(){
$(this).parent().find(".nav-second").slideToggle(500);
$(this).children(i).toggleClass('fold');
});
$('.item-2').click(function(){
$(this).parent().find(".nav-three").slideToggle(500);
$(this).children(i).toggleClass('fold');
});
});
</script>
</head>
<body>
<div id="warp">
<ul>
<li>
<ul class="nav-first">
<li ><a class="item-1"><i></i>办公管理</a>
<ul class="nav-second fold ">
<li > <a class="item-2"><i></i>请假申请</a>
<ul class="nav-three fold" >
<li> <a >出差申请</a></li>
<li> <a >请假记录</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li ><a class="item-1"><i></i>办公管理</a>
<ul class="nav-second fold ">
<li > <a class="item-2"><i></i>请假申请</a>
<ul class="nav-three fold" >
<li> <a >出差申请</a></li>
<li> <a >请假记录</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li ><a class="item-1"><i></i>办公管理</a>
<ul class="nav-second fold ">
<li > <a class="item-2"><i></i>请假申请</a>
<ul class="nav-three fold" >
<li> <a >出差申请</a></li>
<li> <a >请假记录</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li ><a class="item-1"><i></i>办公管理</a>
<ul class="nav-second fold ">
<li > <a class="item-2"><i></i>请假申请</a>
<ul class="nav-three fold" >
<li> <a >出差申请</a></li>
<li> <a >请假记录</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>结果截图：
第二种，用插件layui.tree
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui.tree</title>
<link rel="stylesheet" href="js/layui-v2.2.5/layui/css/layui.css">
<script src="js/layui-v2.2.5/layui/layui.all.js"></script>
<script>
window.onload=function(){
layui.tree({
elem:'#demo',
nodes:[{
name:'办公管理',
children:[{
name:'请假申请'
},
{name:'出差申请'}
]
},
{
name:'请假记录',
children:[{
name:'系统设置'
},
{name:'权限管理'}
]
},
{
name:'请假记录',
children:[{
name:'系统设置'
},
{name:'权限管理'}
]
}
]
});
}
</script>
</head>
<body>
<ul id="demo"></ul>
</body>
</html>注意：需要引进layui.css和layui.all.js
结果截图：
