Layui 导航默认展开和菜单栏选中高亮设置的方法

更新时间：2019年09月04日 10:06:44 作者：黄宝康

今天小编就为大家分享一篇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。

效果展示如下：

本人也是通过查看点击相应导航，在浏览器控制台查看渲染后的class，得出此结果。

以上这篇Layui 导航默认展开和菜单栏选中高亮设置的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS代码如何获取map的key
这篇文章主要介绍了JS代码如何获取map的key，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
基于javascript的异步编程实例详解
这篇文章主要介绍了基于javascript的异步编程,结合实例形式分析了javascript异步编程的原理、实现技巧与相关注意事项,需要的朋友可以参考下
2017-04-04
js模态对话框使用方法详解
这篇文章主要为大家详细介绍了js模态对话框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
可能被忽略的一些JavaScript数组方法细节
这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
JavaScript中的toString()和toLocaleString()方法的区别
本文给大家介绍JavaScript中的toString()和toLocaleString()方法的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
整理Javascript函数学习笔记
整理Javascript函数学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习Javascript函数，希望大家继续关注
2015-12-12
javascript实现fetch请求返回的统一拦截
这篇文章主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
js不完美解决click和dblclick事件冲突问题
当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click
2012-07-07
JavaScript中常见内置函数用法示例
这篇文章主要介绍了JavaScript中常见内置函数用法,结合实例形式分析了JavaScript常用内置函数的功能、参数、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-05-05
图片img的src不变让浏览器重新加载实现方法
图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时，浏览器直接就去读取缓存
2013-03-03