Layui layuiAdmin如何保持菜单栏的状态,即使在同一模块跳转,激活状态也不变

第一步修改

打开 layout.html 文件

找到下面的位置

在 var match = path[0] ==  中添加条件 ,每个条件使用“||“分开

每个条件分两部分,具体如下;具体解释见附一:

(pathURL.indexOf('assessAlltwo')>-1&&item.jump.indexOf('assesslist')>-1)

(pathURL.indexOf('副页文件名')>-1&&item.jump.indexOf('主页文件名')>-1)

第二步修改

打开下图文件

使用Vscode的搜索 matchMenu 快速定位到修改的位置

 在其下面添加下面代码

      if(pathURL == '#后面的路径字符串'){$('[data-name=主页在menu.js的mname]').addClass('layui-nav-item');$('[data-name=主页在menu.js的mname]').addClass('layui-this');return false}

 

解释一下这里:使用一个路径来说明:

路劲:http://127.0.0.1:8080/staruser/userDetail/

 其中staruser是和菜单栏绑定的,即是menu.js(在路径:start/json/ 下)中的:”name“属性对应的值,菜单栏的激活状态也是根据她的,他就是 主页文件名

userDetail/则是你在打开另一个网页的文件名,记得userDetail他是放在文件staruser下。当跳转到该网页时,想要上一级的主页staruser保持激活状态

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用layui的元素操作模块 `element` 来实现收缩左侧菜单的功能。具体代码如下: HTML代码: ```html <div class="layui-layout layui-layout-admin"> <div class="layui-header">...</div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧菜单 --> <ul class="layui-nav layui-nav-tree" lay-filter="side-menu"> <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> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">菜单二</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项3</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body">...</div> </div> ``` JavaScript代码: ```javascript layui.use(['element'], function(){ var element = layui.element; // 监听左侧菜单 element.on('nav(side-menu)', function(elem){ // 如果点击的是有子菜单菜单项,不收缩菜单 if(elem.parent().hasClass('layui-nav-itemed')){ return; } // 如果点击的是没有子菜单菜单项,则收缩菜单 var sideBar = $('.layui-side'); if(sideBar.hasClass('layui-side-collapsed')){ sideBar.removeClass('layui-side-collapsed'); } else{ sideBar.addClass('layui-side-collapsed'); } }); }); ``` 以上代码实现的功能是:如果点击的菜单项有子菜单,则不收缩左侧菜单;如果点击的是没有子菜单菜单项,则收缩左侧菜单。你可以根据自己的需求修改代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值