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>