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

<ul lay-filter="kitNavbar" kit-navbar> <c:if test="${title_sys eq '内容管理' }"> <li><a href="javascript:;" ><i aria-hidden="true"></i><span>宣传教育</span></a> <dl> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/jctt',icon:'&#xe658;',title:'基层头条',id:'73'}"><i aria-hidden="true">&#xe658;</i><span>基层头条</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/dyxf',icon:'&#xe658;',title:'党员先锋',id:'74'}"><i aria-hidden="true">&#xe658;</i><span>党员先锋</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/wdk',icon:'&#xe658;',title:'微党课',id:'75'}"><i aria-hidden="true">&#xe658;</i><span>微党课</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/remote_education',icon:'&#xe658;',title:'远程教育',id:'76'}"><i aria-hidden="true"></i><span>远程教育</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/constant/ad',icon:'&#xe658;',title:'广告轮播',id:'77'}"><i aria-hidden="true"></i><span>广告轮播</span></a> </dd> </dl> </li> <li><a href="javascript:;" ><i aria-hidden="true"></i><span>每日一学</span></a> <dl> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/mryx_type',icon:'&#xe658;',title:'学习类型管理',id:'200'}"><i aria-hidden="true"></i><span>学习类型管理</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/mryx',icon:'&#xe658;',title:'知识点管理',id:'201'}"><i aria-hidden="true"></i><span>知识点管理</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/mryx_publish',icon:'&#xe658;',title:'发布记录列表',id:'202'}"><i aria-hidden="true"></i><span>发布记录列表</span></a> </dd> </dl> </li> <li><a href="javascript:;" ><i aria-hidden="true"></i><span>每月一考</span></a> <dl> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/quest_type_index',icon:'&#xe658;',title:'题库类型',id:'80'}"><i aria-hidden="true"></i><span>题库类型</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/quest_index',icon:'&#xe658;',title:'考题管理',id:'81'}"><i aria-hidden="true"></i><span>考题管理</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/quest_model_index',icon:'&#xe658;',title:'考卷模板',id:'82'}"><i aria-hidden="true"></i><span>考卷模板</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path %>/content/exam_index',icon:'&#xe658;',title:'考卷管理',id:'83'}"><i aria-hidden="true"></i><span>考卷管理</span></a> </dd> <dd> <a href="javascript:;" kit-target data-options="{url:'<%=path%>/content/record_index',icon:'&#xe658;',title:'考试记录',id:'84'}"><i 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 导航默认展开和菜单栏选中高亮设置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f4c03fd42a13585809dbcb7df08e09a6.html