动态菜单怎么制作出来

Question

{"code":"ok","data":{"roots":[{"key":"1","children":[{"key":"2","children":null,"title":"功能一1","icon":null,"url":null,"bindData":"http://www.qq.com"},{"key":"3","children":null,"title":"功能一2","icon":null,"url":null,"bindData":"/ssm/system/module/list.html"},{"key":"4","children":null,"title":"功能一3","icon":null,"url":null,"bindData":"http://www.taobao.com"}],"title":"功能一","icon":null,"url":null,"bindData":null},{"key":"5","children":[{"key":"6","children":null,"title":"功能二1","icon":null,"url":null,"bindData":"http://www.hao123.com"}],"title":"功能二","icon":null,"url":null,"bindData":null},{"key":"7","children":[{"key":"8","children":null,"title":"功能三1","icon":null,"url":null,"bindData":null},{"key":"9","children":null,"title":"功能三2","icon":null,"url":null,"bindData":null}],"title":"功能三","icon":null,"url":null,"bindData":null}]},"message":null} <div id="bd">
<div class="wrap ue-clear">
<div class="sidebar">
<h2 class="sidebar-header">
<p>功能导航</p>
</h2>
<ul class="nav" id="menu">
                                        
菜单位置     </ul>
</div>
<div class="content">
<iframe src="info-mgt.html" id="iframe" width="100%" height="100%"
frameborder="0"></iframe>
</div>
</div>
</div>
需要将上面的json数据添加到菜单位置，并用CSS控制   展开  或闭合状态

Answer 1

用JQ的toggle()切换显示隐藏。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

Answer 2

获取JSON数据用循环
var htmlStr="";
var arrayData=jsonData["data"]["roots"];
for(var i=0;i<jsonData["data"]["roots"].length;i++){
htmlStr+="<li>"+arrayData[i]+"</li>";
}
$("#menu").html(htmlStr);