我的思路是这样的：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"}]}        
 ]}