layui 无限极菜单

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

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

html

<ul class="layui-nav layui-nav-tree" lay-filter="leftmenu" id="menu"></ul>

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+='<li class="layui-nav-item layui-nav-itemed">' +
                         '<a href="javascript:;" style="padding-left: '+p+'px"><i class="iconfont '+ch[i].icon+'"> </i> '+ch[i].title+'</a>' +
                         '<dl class="layui-nav-child">' ;
                             if( ch[i].children){
                                 html+=dlfor(ch[i].children,p);
                             }
                    html+='</dl>'+
                    '</li>'
                }else {
                    html+='<li class="layui-nav-item"><a class="nav-active" href="javascript:;" data-id="'+ch[i].c+'" data-url="'+ch[i].m+'/'+ch[i].c+'" data-title="'+ch[i].title+'">'+ch[i].title+'</a></li>'
                }
            }
            return html
        }
//li下进行的循环执行
list-->孩子节点
p-->距离左边距
function dlfor(list,p){
            var p = p+10;
            var dd = "";

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

                if(list[k].children){
                    dd+='<a href="javascript:;" style="padding-left:'+p+'px "><i class="iconfont '+list[k].icon+'"> </i>  '+list[k].title+'</a>' +
                        '<dl class="layui-nav-child">' ;

                    dd+=dlfor(list[k].children,p);
                    dd+='</dl>';
                }else{
                    dd+='<a href="javascript:;" class="nav-active" style="padding-left:'+p+'px  " data-id="'+list[k].c+'" data-url="'+list[k].m+'/'+list[k].c+'" data-title="'+list[k].title+'"><i class="iconfont '+list[k].icon+'"> </i> '+list[k].title+'</a>';
                }
                dd+="</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++;

})