我的思路是这样的：1. 首先将所有数据全部取出转化为JSON格式
2. 然后加载到页面
3. 通过css的display 来控制显示和隐藏
代码案例如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>树形菜单</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.hidden{
display: none;
}
</style>
</head>
<body>
<div>
<ul>
<li id="main">
<span id="buttenClick">总菜单<span>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
//初始化加载所有数据
init();
//主菜单点击事件
$("#buttenClick").click(function(){
if($(".ul").hasClass("hidden")){
$(".ul").removeClass("hidden");
}else{
$(".ul").addClass("hidden");
}
//二级菜单点击事件
$(".liclick").click(function(){
//找到同辈的ul1元素
if($(this).siblings(".ul1").hasClass("hidden")){
$(this).siblings(".ul1").removeClass("hidden");
}else{
$(this).siblings(".ul1").addClass("hidden");
}
});
});
});
function init(){
$.ajax({
type: 'POST',
url: 'test.json',
data: null,
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
//得到json对象,加载到页面
var ul1 = data.item1;
//遍历，并添加对应数量的二级菜单
$("#main").append("<ul class='ul'></ul>");
for(var i=0;i<ul1.length;i++){
$(".ul").append("<li class='li1'><span class='liclick'>"+ul1[i].name+"</span></li>");
//遍历，添加对应数量的三级菜单
var ul11 = ul1[i].item11;
$(".li1").eq(i).append("<ul class='ul1'></ul>");
for(var j=0;j<ul11.length;j++){
//加载子类菜单
$(".ul1").eq(i).append("<li class='li11'><span class='liclick11'>"+ul11[j].name+"</span></li>");
}
}
//展示出来没有问题后，默认将他们隐藏
$(".ul").addClass("hidden");
$(".ul1").addClass("hidden");
}
});
}
</script>
</body>
</html>
test.json文件内容:
{"item1":[
{"name":"副菜单1","item11":[{"name":"副菜单1的菜单1"},{"name":"副菜单1的菜单2"},{"name":"副菜单1的菜单3"}]},
{"name":"副菜单2","item11":[{"name":"副菜单2的菜单1"},{"name":"副菜单2的菜单2"},{"name":"副菜单2的菜单3"}]},
{"name":"副菜单3","item11":[{"name":"副菜单3的菜单1"},{"name":"副菜单3的菜单2"},{"name":"副菜单3的菜单3"}]}
]}