如何創建子子菜單？

Question

我在創建jquery菜單時遇到了問題。我從json對象創建了一個水平菜單。 我的頁面是

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

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

      ] 
    }, 

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

在這裏，我有3個輔助子場的場「招聘」。我如何使用json創建一個子小孩？

Answer 1

存在，這將創造你3級的HTML結構的代碼，你需要的款式在你自己：

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(); 
});