【Layui】側邊菜單導航禁用折疊、去除箭頭樣式


官方提供的樣式代碼:


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




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM