<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠菜单</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="caidan">
</div>
</body>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
setData(data);
});
var data=[
{
title:'标题一',
children:[
{title:'子菜单1'},
{title:'子菜单2'},
{title:'子菜单3'}
]
},
{
title:'标题二',
children:[
{title:'子菜单1'},
{title:'子菜单2'},
{title:'子菜单3'}
]
},
];
function setData(data){
var html='<ul>';
for(var i=0;i<data.length;i++){
html+='<li class="first">'+
'<p>'+data[i].title+'</p>'+
'<ul>';
for(var j=0;j<data[i].children.length;j++){
html+='<li class="children">'+data[i].children[j].title+'</li>';
}
html+='</ul>'+
'</li>';
}
html+='</ul>';
$('#caidan').append(html);
}
</script>
</html>
