如何使用json對象創建水平菜單？

我有這樣如何使用json對象創建水平菜單？

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

       ] 
     }, 
     {"parent": "Services", 
     "child": [ 
       {"title":"Infrastruture"}, 
       {"title":"Development"} 

       ] 
     }, 
     { 
     "parent": "Sector", 
     "child": [ 
       {"title":"Recruitment Consultant"}, 
       {"title":"Change Management"}, 
       {"title":"Industrial Relations"} 
       ] 
     },   
     ]

JSON對象我想要做一個橫向菜單相對於這個JSON。我是新的json對象。所以我該如何做到這一點？

來源

2013-02-21 Niths

你嘗試過什麼嗎？ – 2013-02-21 11:54:41

是的..我做了這個使用jq widgets.but在那裏我用id。但我想要像上面提到的代碼的JSON。 – Niths 2013-02-21 11:55:48

這應該完成它。

標記

<ul id="nav"></ul>

的JavaScript

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

      ] 
    }, 
    {"parent": "Services", 
    "child": [ 
      {"title":"Infrastruture"}, 
      {"title":"Development"} 

      ] 
    }, 
    { 
    "parent": "Sector", 
    "child": [ 
      {"title":"Recruitment Consultant"}, 
      {"title":"Change Management"}, 
      {"title":"Industrial Relations"} 
      ] 
    },   
    ]; 
$(function() { 
    var nav = $("#nav"); 
    $.each(data,function(idx, obj){ 
     if(obj.child.length>0) 
     { 
      nav.append('<li><a href="#">'+obj.parent+'</a><ul 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){ 
       parent.append('<li><a href="#">'+childobj.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. 
     } 
    }); 
});

，因爲我們有這麼多的標記加上JS（不是一個好主意），但只要結構保持這可能是語義錯誤同樣，這樣做很好。

Demo Fiddle

P.S：我要離開你與造型一部分。提示：在JS本身中提供類和標記。 ;-)

來源

2013-02-21 12:57:29 Kushal

如果我有招聘菜單的另一個subchild字段..我可以如何整合？ – Niths 2013-02-22 10:18:35

@NithinViswanath：然後你必須在'if'塊內的新條件下添加另一個'$ .each'，這應該很容易做到。 – Kushal 2013-02-22 10:21:51

http://jsfiddle.net/2fZYC/1/ ..你可以看到我昨天做的代碼。 – Niths 2013-02-22 10:23:34

你可以像訪問Javascript Object那樣訪問你的json。你可以做這樣的事情：

for (var i = 0; i < data.length; i++) { 

    createHeaderLink(data[i].parent); 
    createChildLinks(data[i].child); 

}

來源

2013-02-21 11:59:20

如何使用json對象創建水平菜單？

回答

相關問題