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