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++;

})