动态生成二级菜单 

<!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>

 

posted @ 2017-07-06 10:47  华~静看一季花开花落  阅读(267)  评论(0)    收藏  举报