layUi设置菜单跟随
今天开发中测试人员提出一个bug,说从一个菜单项点击进入另一个菜单项后,点击浏览器后退按钮后layUI的菜单无法跟随。
机智如我,都是小问题。
解决步骤
为每一个菜单项配置一个独特的属性——key
第一种,每个layUI菜单项都对应一个html页面的话,将url地址设置为这个独特属性。
第二种,每个layUI菜单项对应一个选项卡时,将选项卡标识和菜单项的key对应。
获取应当展示的菜单项key值
// 获取该页面对应url,有需求的话字符串拆分即可
var newPathName = window.location.pathname;
如果是选项卡的话,使用jQuery获取点击选项卡的对应key值
在渲染菜单项的方法后添加代码
// 遍历每个菜单项
$("#adminlaysol dd").each(function (i, obj) {
if ($(obj).find("a").attr("key") == newPathNameCopy) {
// 如果找到对应key值的菜单项,
// 将菜单div下的每个菜单大项取消展开,将菜单div下的每个菜单项取消选中
$("#adminlaysol dd").removeClass("layui-this");
$("#adminlaysol li").removeClass("layui-nav-itemed");
// 将父级项展开,并且设置为选中
$(obj).parent().parent().addClass("layui-nav-itemed");
$(obj).addClass("layui-this");
return false;
}
})