layui 无限极菜单

1.框架：layui
2.目的：无限极菜单
3.数据返回：json,也可以自定义jsoin
4.最终实现如下

5代码实现
由于第一次需要有li所以只能剥离做两次进行实现

html

jq

调用：

$("#menu").append(menu_apd(res,0))
//执行得到一级菜单li
ch-->返回的json数据
p-->左边距距离
function menu_apd(ch,p) {

            var html = "";
            var p = 20+p;
            for(var i in ch){
                if(ch[i].children){
                     html+='
' +
                         '  '+ch[i].title+'' +
                         '
' ;
                             if( ch[i].children){
                                 html+=dlfor(ch[i].children,p);
                             }
                    html+='
'+
                    '
'
                }else {
                    html+='
'+ch[i].title+'
'
                }
            }
            return html
        }
//li下进行的循环执行
list-->孩子节点
p-->距离左边距
function dlfor(list,p){
            var p = p+10;
            var dd = "";

            for(var k in list){
                dd+='
' ;

                if(list[k].children){
                    dd+='   '+list[k].title+'' +
                        '
' ;

                    dd+=dlfor(list[k].children,p);
                    dd+='
';
                }else{
                    dd+='  '+list[k].title+'';
                }
                dd+="
";
            }
            return dd;
        }

结余：菜单点击收缩可是借助jq动画实现

var kks = 1;
$('.menu-act').on('click',function () {
    if(kks%2 == 0){
        $(".layui-layout-admin .layui-side").animate({width:"200px"},500);
      }else{
        $(".layui-layout-admin .layui-side").animate({width:"40px"},500);
     }
    kks++;

})