하위 하위 메뉴를 만드는 방법은 무엇입니까?

Question

jquery-menu를 만드는 동안 문제가 있습니다. json 객체에서 가로 메뉴를 만들었습니다. 내 페이지에 내가 필드 '모집'에 대한 3 하위 아이 필드가 여기에

var data = [ 
    { 
    "parent": "Home", 
    "child": [ 

      ] 
    }, 
    { 
    "parent": "Instructions", 
    "child": [ 

      ] 
    }, 

    { 
    "parent": "Administration", 
    "child": [ 
      {"title":"Recruitment"}, 
      {"title":"Management"}, 
      {"title":"Relations"} 
      ] 
    }, 
    ]; 

입니다. json을 사용하여 하위 하위를 만들려면 어떻게해야합니까? 당신이 3 단계에 대한 HTML 구조를 생성하는 코드가

Answer 1

, 당신은 자신에 스타일을해야합니다

var data = [ 
{ 
    "parent": "Home", 
    "child": [ 
      ] 
}, 
{ 
    "parent": "Instructions", 
    "child": [ 
     { 
      "title":"Recruitment", 
      "subchild": [ 
       {"title":"sub1"}, 
       {"title":"sub2"}, 
       {"title":"sub3"} 
      ] 
     }, 
     {"title":"Management"}, 
     {"title":"Relations"} 
     ] 
}, 
{ 
    "parent": "Administration", 
    "child": [ 
     {"title":"Recruitment"}, 
     {"title":"Management"}, 
     {"title":"Relations"} 
     ] 
    }, 
]; 
$(function() { 
    $('.nav-child').hover(function(){ 
    $('.parent-menu').css('background','red'); 
    }); 
    var nav = $("#nav"); 
    $.each(data,function(idx, obj){ 
     if(obj.child.length>0) 
     { 
      nav.append('<li><a href="#" class="parent-menu">'+obj.parent+'</a><ul class="child-list" id="'+obj.parent+'">'); //Create Parent menu and attach Child menu items list with ID same as parent menu name. 
      var parent = $("#"+obj.parent); //Select this parent to insert child items. 

      //Insert child menu items. 
      $.each(obj.child, function(idx, childobj){ 
       var childid = obj.parent + '-item-' + idx; 
       parent.append('<li class="nav-child" id="'+childid+'"><a href="#">'+childobj.title+'</a></li>'); 

       //insert subchild items 
       if(childobj.subchild != undefined && childobj.subchild.length>0){ 
        var child = $("#"+childid); //Select child element to insert subchild items. 
        child.append('<ul class="subchild-list"></ul>'); 
        var ul = $(child).find('ul'); 

        $.each(childobj.subchild, function(index, subchildobj){ 
         ul.append('<li class="nav-subchild"><a href="#">'+subchildobj.title+'</a></li>');     
        }); 
       } 
      }); 
      nav.append('</ul></li>'); //Close each tag. 
     } 
     else 
     { 
      nav.append('<li><a href="#">'+obj.parent+'</a></li>'); //No child menu items present, just create parent menu. 
     } 
    }); 
    ("#nav").menu(); 
});