json에서 하위 하위 메뉴를 만드는 방법

Question

json 파일에서 가로 메뉴를 만들었습니다. 하지만 나는 자식과 하위 클래스를 만들 수 없습니다. 관리자의 자녀를 만들면 집의 자녀에게갑니다. 내 자바 스크립트 파일은 아이가 아니라 하위 아이가 여기 http://jsfiddle.net/JcU4G/9/에서 내 코드를 확인할 수 있습니다

var data = [{ 
    "menu":[ 
     { 
      "MenuId":1, 
      "MenuName":"Home", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":1, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":2, 
      "MenuName":"New Transaction", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":2, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":3, 
      "MenuName":"Portfolio", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":3, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":4, 
      "MenuName":"Analytics", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":4, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":5, 
      "MenuName":"Instructions", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":5, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":6, 
      "MenuName":"Data Upload", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":6, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":7, 
      "MenuName":"Administration", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":7, 
      "ModuleId":null, 
      "Menus":[ 
       { 
        "MenuId":8, 
        "MenuName":"Masters", 
        "MenuLink":null, 
        "Action":null, 
        "Controller":null, 
        "ParentID":7, 
        "SortOrder":1, 
        "ModuleId":null, 
        "Menus":[ 
         { 
          "MenuId":10, 
          "MenuName":"Currency", 
          "MenuLink":"/Currencies/Index", 
          "Action":"Index", 
          "Controller":"Currencies", 
          "ParentID":8, 
          "SortOrder":1, 
          "ModuleId":null, 
          "Menus":{ 
          } 
         }, 
         { 
          "MenuId":11, 
          "MenuName":"Country", 
          "MenuLink":"/Countries/Index", 
          "Action":"Index", 
          "Controller":"Countries", 
          "ParentID":8, 
          "SortOrder":2, 
          "ModuleId":null, 
          "Menus":{ 
          } 
         } 
        ] 
       }, 
       { 
        "MenuId":9, 
        "MenuName":"User Management", 
        "MenuLink":null, 
        "Action":null, 
        "Controller":null, 
        "ParentID":7, 
        "SortOrder":2, 
        "ModuleId":null, 
        "Menus":{ 
        } 
       } 
      ] 
     } 
    ] 
} 
]; 
$(function() { 
for(var i = 0, j = data[0].menu.length; i<j; i++) { 
    var root_menu = data[0].menu[i]; 
    if(root_menu.hasOwnProperty("MenuId")) { 
     $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>'); 
     if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) { 
      $("#menu li").append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>"); 
      for(var n = 0, m = root_menu.Menus.length; n<m; n++) { 
       var sub_menu = root_menu.Menus[n]; 
       if(sub_menu.hasOwnProperty("MenuId")) { 
        $("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>"); 

       } 
      } 

     } 
$("#menu").append("</ul></li>"); 

    } 
} 
}); 

입니다. json 파일에서 자식 및 하위 자식을 정렬하려면 어떻게해야합니까? 당신이 통해 반복하고 단순히

$("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>"); 

이 오른쪽 메인 메뉴 항목에 하위 메뉴를 추가합니다) (.last 사용할 수있는 메인 메뉴로 리 요소를 추가하고 있기 때문에

Answer 1

=)

편집 : 물론

if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){ 
        $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='child-list' id='menu_" + sub_menu.MenuId + "'>"); 
        for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){ 
         var subsub_menu = sub_menu.Menus[oo]; 
         $("#menu_" + sub_menu.MenuId).append("<li></li>") 
        } 
        $("#menu_" + root_menu.MenuId + " li").last().append("</ul>"); 
       } 

: 이 라인을 따라 뭔가를 추가 다른 하위 서브 메뉴를 추가하려면 이제 스타일을 바로 잡아야합니다 ... subsub_menu 항목을 완벽하게 표시해야합니다. jsfiddle.net/HPNkq

당신은 내가 당신의 전체 코드를 다시 작성하고 싶지 않았다 프로그램에 새로운 점을 고려하지만, 단지 비트 당신이 이미 있었다 같은 방식으로 추가 : 여기에 내가 당신의 예를 포크와 스타일의 그것을 제거 바이올린입니다 코딩. 그러나, 나는 메뉴 수준 bilds 및 재귀 적으로 항목을 하위 메뉴가있는 경우 다시 호출하는 함수를 정의하여 이러한 문제를 접근 할 것이다.