使用layui模板引擎构建导航二级菜单

这是我的导航栏

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

这是二级菜单模板引擎，可以无限拓展下去

   {{# layui.each(d.list, function(index, item){ }}
    {{#  if(item.child.length === 0){ }}
    <li class='layui-nav-item'><a href={{item.url}} target='iframes'>{{item.name}}</a>
        {{# } else { }}
    <li class='layui-nav-item' id='sys' onclick='clickme()'><a href='javascript:;'><span class='layui-nav-more'></span>{{item.name}}</a>
        <dl class='test layui-nav-child'>
            {{# layui.each(item.child, function(index, item){ }}
            <dd><a href={{item.url}} target='iframes'>{{item.name}}</a></dd>
            {{# }); }}
        </dl>
    </li>
    {{#  } }}
    {{# }); }}

这是后台响应的model

image.png

这是前端处理

 success: function (data) {
               var data = {
                    "list": data,
                }

                //渲染模板
                var getTpl = demo.innerHTML
                    , view = $("#menu");
                laytpl(getTpl).render(data, function (html) {
                    view.append(html);
                });

                /**
                 * 模板渲染后，不会执行下面的语句呢
                 */

这是点击，展开二级菜单的代码

  function clickme() {
        /*先判断里面有没有该样式*/
        if ($("#sys").attr("class").indexOf("layui-nav-itemed") > 0) {
            $("#sys").removeClass("layui-nav-itemed");
        } else {
            $("#sys").addClass("layui-nav-itemed");
        }
    }

完成后的效果图，样式要有待继续调整，不过基础功能已经实现

image.png

现在没继续扩展了，因为先完成毕业设计要主，就做到二级菜单