官方提供的樣式代碼:
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認展開</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">選項1</a></dd>
<dd><a href="javascript:;">選項2</a></dd>
<dd><a href="">跳轉</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動模塊</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">電商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">產品</a></li>
<li class="layui-nav-item"><a href="">大數據</a></li>
</ul>
解決辦法:
<style>
.layui-nav-item a{
background-color: #4E5465;
color: #ffffff;
}
.layui-nav-item .layui-nav-child a{
background-color: #333333;
color: #ffffff;
}
/*禁用左側菜單的箭頭*/
body .layui-nav .layui-nav-more{display: none}
</style>
<script>
layui.use(['element','layer'], function(){
var element = layui.element, //導航的hover效果、二級菜單等功能,需要依賴element模塊
layer = layui.layer;
//監聽導航點擊
element.on('nav(test)', function(elem){
layer.msg(elem.text());
//禁用菜單的折疊
$(".layui-nav-tree").find(".layui-nav-child").css("display","contents");
});
});
</script>