编程 Javascript

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

Posted in Javascript onSeptember 04, 2019

如下所示：

<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:'',title:'基层头条',id:'73'}"><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/dyxf',icon:'',title:'党员先锋',id:'74'}"><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/wdk',icon:'',title:'微党课',id:'75'}"><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/remote_education',icon:'',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:'',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:'',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:'',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:'',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:'',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:'',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:'',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:'',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:'',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 导航默认展开和菜单栏选中高亮设置的方法

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

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

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

- Author -

黄宝康

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 保存数组到Cookie的代码

Apr 14 Javascript

document.getElementById介绍

Sep 13 Javascript

JavaScript闭包懂不懂由你反正我是懂了

Oct 21 Javascript

chrome浏览器不支持onmouseleave事件的解决技巧

May 31 Javascript

jQuery实现密保互斥问题解决方案

Aug 16 Javascript

JS获取当前网页大小以及屏幕分辨率等

Sep 05 Javascript

AngularJS 中的数据源的循环输出

Oct 12 Javascript

jquery根据name取得select选中的值实例(超简单)

Jan 25 jQuery

vue-cli2打包前和打包后的css前缀不一致的问题解决

Aug 24 Javascript

详解微信小程序开发框架（MINA）

May 17 Javascript

原生js实现俄罗斯方块

Oct 20 Javascript

js面向对象编程OOP及函数式编程FP区别

Jul 07 Javascript

微信小程序官方动态自定义底部tabBar的例子

Sep 04 #Javascript

layerui代码控制tab选项卡,添加,关闭的实例

Sep 04 #Javascript

layui 表单标签的校验方法

Sep 04 #Javascript

解决layui 表单元素radio不显示渲染的问题

Sep 04 #Javascript

对layer弹出框中icon数字参数的说明介绍

Sep 04 #Javascript

Element 默认勾选表格 toggleRowSelection的实现

Sep 04 #Javascript

使用Angular material主题定义自己的组件库的配色体系

Sep 04 #Javascript