Layui如何設置導航默認展開和菜單欄選中高亮效果

這篇文章主要介紹Layui如何設置導航默認展開和菜單欄選中高亮效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

如下所示：

<ul class="layui-nav layui-nav-tree custom-nav-tree" lay-filter="kitNavbar" kit-navbar>

     <c:if test="${title_sys eq '內容管理' }">
      <li class="layui-nav-item index1 layui-nav-itemed"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>宣傳教育</span></a>
       <dl class="layui-nav-child">
        <dd class="layui-this">
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/jctt',icon:'&#xe658;',title:'基層頭條',id:'73'}"><i class="layui-icon" aria-hidden="true">&#xe658;</i><span>基層頭條</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/dyxf',icon:'&#xe658;',title:'黨員先鋒',id:'74'}"><i class="layui-icon" aria-hidden="true">&#xe658;</i><span>黨員先鋒</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/wdk',icon:'&#xe658;',title:'微黨課',id:'75'}"><i class="layui-icon" aria-hidden="true">&#xe658;</i><span>微黨課</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/remote_education',icon:'&#xe658;',title:'遠程教育',id:'76'}"><i class="layui-icon" aria-hidden="true"></i><span>遠程教育</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/constant/ad',icon:'&#xe658;',title:'廣告輪播',id:'77'}"><i class="layui-icon" aria-hidden="true"></i><span>廣告輪播</span></a>
        </dd>

       </dl>
      </li>

      <li class="layui-nav-item index4"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>每日一學</span></a>
       <dl class="layui-nav-child">
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx_type',icon:'&#xe658;',title:'學習類型管理',id:'200'}"><i class="layui-icon" aria-hidden="true"></i><span>學習類型管理</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx',icon:'&#xe658;',title:'知識點管理',id:'201'}"><i class="layui-icon" aria-hidden="true"></i><span>知識點管理</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx_publish',icon:'&#xe658;',title:'發布記錄列表',id:'202'}"><i class="layui-icon" aria-hidden="true"></i><span>發布記錄列表</span></a>
        </dd>
       </dl>
      </li>
      <li class="layui-nav-item index5"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>每月一考</span></a>
       <dl class="layui-nav-child">
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_type_index',icon:'&#xe658;',title:'題庫類型',id:'80'}"><i class="layui-icon" aria-hidden="true"></i><span>題庫類型</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_index',icon:'&#xe658;',title:'考題管理',id:'81'}"><i class="layui-icon" aria-hidden="true"></i><span>考題管理</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_model_index',icon:'&#xe658;',title:'考卷模板',id:'82'}"><i class="layui-icon" aria-hidden="true"></i><span>考卷模板</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path %>/content/exam_index',icon:'&#xe658;',title:'考卷管理',id:'83'}"><i class="layui-icon" aria-hidden="true"></i><span>考卷管理</span></a>
        </dd>
        <dd>
         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/record_index',icon:'&#xe658;',title:'考試記錄',id:'84'}"><i class="layui-icon" aria-hidden="true"></i><span>考試記錄</span></a>
        </dd>
       </dl></li>
     </c:if>
  </ul>

在第一個宣傳教育li中添加class為layui-nav-itemed，以及在第一個dd中添加class為layui-this。

效果展示如下：

以上是“Layui如何設置導航默認展開和菜單欄選中高亮效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！