动态生成二级菜单
<!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>