1.问题描述：一般的左侧菜单都会是动态添加的模块，利用循环把模块名和链接地址逐个显示出来如下图

但是问题来了，只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态。

2.分析原因：因为模块连接只要点击就会刷新当前页面及左侧菜单，如果值刷新右侧内容也就不会出现这样的情况。

但是在左侧菜单作为模板页是必须要刷新的，例如在模块管理下添加一个模块，要立刻显示当前添加的模块。

如果引用iframe的方法只刷新右侧内容也不能解决当前的问题，况且iframe的性能并不是特别好。所以这里不建议采用

iframe。

3.问题解决：

抓住一个重点，只要点击二级菜单，势必会刷新整个页面。在不刷新的情况下LayUI的自带的效果是这样

既然他要刷新就将计就计，在它未刷新的时候保存该父级和子级的id,保存到cookie中，然后等待他刷新的时候，

再取出id值利用样式循环遍历使他保持原来的LayUI自带的效果。

4.以下是代码：

1）模板页：Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>@ViewBag.Title</title>
<link href="~/Content/src/css/layui.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet"/>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

<!-- 头部区域（可配合layui已有的水平导航） -->
@{Html.RenderAction("Header", "Shared");}

<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
@{Html.RenderAction("Module", "Shared");}

<!-- 内容主体区域 -->
<div class="layui-body">
<div style="padding: 15px;">@RenderBody()</div>
</div>

<!-- 底部固定区域 -->
<div class="layui-footer">
© layui.com - 底部固定区域
</div>
</div>

<script src="~/Content/src/layui.js"></script>

<script>
　　//JavaScript代码区域
　　layui.use(['form', 'element', 'jquery', 'layer', "laydate"], function () {
　　var element = layui.element;
　　var form = layui.form,
　　layer = layui.layer,
　　laydate = layui.laydate,
　　$ = layui.jquery;

　　});
</script>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)

<script type="text/javascript">
$(function () {
　　$("dd a").click(function () {
　　var ModuleID = $(this).parent().parent().parent().attr("id");
　　var PageCode = $(this).parent().attr("id");
　　setCookie("ModuleID", ModuleID);
　　setCookie("PageCode", PageCode);
});
　　var moduleid = getCookie("ModuleID");
　　var pagecode = getCookie("PageCode");
　　$("ul li").each(function (index, element) {
　　if ($(element).attr("id") != moduleid) {
　　$(this).attr("class", "layui-nav-item");
}
else {
　　$(this).attr("class", "layui-nav-item layui-nav-itemed");
　　}
});
$("dd").each(function (index, element) {
　　if ($(element).attr("id") == pagecode) {
　　$(this).attr("class", "layui-this");
　　}
});

//写cookies
function setCookie(name, value, key) {
var Days = 2;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
if (key == null || key == "") {
document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
else {
　　　 var nameValue = getCookie(name);
　　　　if (nameValue == "") {
　　　document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
　　}
　　　else {
　　　　　var keyValue = getCookie(name, key);
　　　　if (keyValue != "") {
　　　 nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
　　　 document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/";
　　}
　　　　　else {
　　　document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
　　　　}
　　}
　　}
}

//读取cookies
function getCookie (name, key) {
　　var nameValue = "";
　　var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
　　if (arr = document.cookie.match(reg)) {
　　nameValue = decodeURI(arr[2]);
　　}
　　if (key != null && key != "") {
　　reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
　　if (arr = nameValue.match(reg)) {
　　alert(decodeURI(arr[2])); return decodeURI(arr[2]);
　　}
　　else return "";
}
else {
　　return nameValue;
}
}

//删除cookies
function delCookie(name) {
　　var exp = new Date();
　　exp.setTime(exp.getTime() - 1);
　　var cval = getCookie(name);
　　if (cval != null)
　　document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
　　}
});
</script>
</body>
</html>

2）分部视图Module.cshtml

@model List<Community.Model.SysModule>

<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
@foreach (var item in Model)
{
　　if (item.ParentId == 1)
　　{
　　　　<li id="@item.ModuleID" class="layui-nav-item">
　　　　<a class="" href="javascript:;">@item.ModuleName</a>
　　　　<dl class="layui-nav-child">
　　@foreach (var item1 in Model)
　　{
　　　　if (item1.ParentId == item.ModuleID)
　　　　{
　　　　　　<dd id="@item1.PageCode"><a href="@item1.Url">@item1.ModuleName</a></dd>
　　　　}
　　}
　　</dl>
　　</li>
　　}
}
</ul>
</div>
</div>

LayUI左侧菜单无法保持选中状态的更多相关文章

  1. element ui el-tree回显问题及提交问题（当后台返回的el-tree相关数组的时候，子菜单未全部选中，但是只要父级菜单的id在数组中，那么他的子菜单为全部选中状态）

    1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...

  2. layui动态设置checkbox选中状态

    今天在使用jquery动态设置layui的checkbox元素的选中状态时始终只能取消选中,却不能重新勾选,点击勾选则没有问题,代码如下 if (value == "true") ...

  3. jq 实现切换菜单选中状态

    点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...

  4. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  5. Element MenuNav刷新后点击菜单保留选中状态

    正常情况刷新后选中菜单会失去选中的状态,需要把default-active 当前激活菜单的 index保存下来这样刷新后读取 methods方法中增加 getSess() { this.active ...

  6. vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

    elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...

  7. layui 动态设置 checbox 选中状态

    layui复选框checkbox选中赋值,解决layui设置checbox选中不生效的问题 直接上代码 //监听指定开关 form.on('switch(dongsir)', function(dat ...

  8. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  9. React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

随机推荐

  1. 【转】Python 之 元类

    原文链接: https://stackoverflow.com/questions/100003/what-is-a-metaclass-in-python      http://python.jo ...

  2. 软件测试：lab1.Junit and Eclemma

    软件测试:lab1.Junit and Eclemma Task: Install Junit(4.12), Hamcrest(1.3) with Eclipse Install Eclemma wi ...

  3. Galaxy2D游戏引擎常见问题解答

    ◆Galaxy2D游戏引擎开源吗?    Galaxy2D游戏引擎不开源. ◆Galaxy2D相对HGE有何优点?    Galaxy2D相对HGE有以下优点:     (1)自带音频播放功能,HGE ...

  4. Spark RDD 操作

    1. Spark RDD 创建操作 1.1 数据集合   parallelize 可以创建一个能够并行操作的RDD.其函数定义如下: ) scala> sc.defaultParallelism ...

  5. nginx mac

    ==> nginx Docroot is: /usr/local/var/www The default port has been set in /usr/local/etc/nginx/ng ...

  6. 网络通信协议tcp,udp区别

    1 网络通信协议 Tcp udp的区别 重点(*****) Tcp三次握手四次挥手(******) udp客户端多人聊天 import socket udp_client = socket.socke ...

  7. idea 炫酷插件

    1.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包.详情 ...

  8. SQL多表操作

    1.多表之间的建表原则 一对多:商品和分类 建表原则:在多的一方添加一个外键,指向一的一方的主键 多对多:老师和学生,学生和课程 建表原则:建立一张中间表,将多对多的关系,拆分成一对多的关系,中间表至 ...

  9. linux 怎么与网络对时

    首先来了解下面几个知识点:1. date命令:#date显示系统时间2.hwclock命令 (即hardwareclock系统硬件时间)#hwclock显示硬件时间#hwclock -w将系统时间写入 ...

  10. python3 在文件确实存在的情况下，运行提示找不到文件

    提示 [Errno 2] No such file or directory: 但是路径下确实存在此文件,在不改动的情况下,再次运行,执行成功. 百思不得其解,看到此链接下的回答 http://bbs ...