layui是一款优秀的前端模块化css框架,做者是贤心 —— 国内的一位前端大佬。javascript
我用layui作过两个完整的项目,对她的感受就是,这货很是适合作后台管理界面,且基于jquery,很容易上手。固然,她最大的优势我以为仍是她的模块化方式,相比requirejs,seajs之类繁琐的配置,她更简单粗暴。若是你正在寻找这样一个前端框架,那么我向你推荐她。css
废话说了一堆,下面说重点。html
先上张图前端
上面这张图对应的html代码是这样的java
<ul class="layui-nav layui-nav-tree" lay-filter="nav"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">销售管理</a> <dl class="layui-nav-child"> <dd> <a href="xiaoshoudingdan.asp">销售订单</a> </dd> <dd> <a href="jianyidingdan.asp">建议订单</a> </dd> <dd> <a href="xiaoshoutuidan.asp">销售退单</a> </dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">采购管理</a> <dl class="layui-nav-child"> <dd> <a href="caigoudingdan.asp">采购订单</a> </dd> <dd> <a href="caigoutuidan.asp">采购退单</a> </dd> </dl> </li> .....此处省略N行代码
先简单分析一下这段代码:jquery
layui-nav表示导航容器,layui-nav-tree表示树状导航,若是是侧边栏导航的话就须要加上这个类,若是是顶部导航就不须要;至于lay-filter="nav",官网的解释是“事件过滤器。你可能会在不少地方看到他,他通常是用于监听特定的自定义事件。你能够把它看做是一个ID选择器”前端框架
每一个li下面的第一个a标签是一级导航,dl包裹的是二级导航。默认状况下,只要你页面中引入了layui的内置模块element.js,当你点击一级导航时会折叠或者是展开二级菜单。但是我项目当中并不须要这一功能,因而须要禁掉。但是看过文档以后发现layui并无提供能够禁掉该事件的属性。没办法,只能看看源码,好在layui的源码结构很是清晰,注释也很是详细,很快就能找到这个地方。框架
在element.js的377行这个位置加个return,让代码不在往下执行,问题就解决了。模块化
折叠箭头也会消失requirejs