LayUI左側菜單沒法保持選中狀態

1.問題描述：通常的左側菜單都會是動態添加的模塊，利用循環把模塊名和連接地址逐個顯示出來以下圖javascript

可是問題來了，只要點任何二級菜單就不會保持左側菜單當前一級菜單和二級菜單選中狀態。css

2.分析緣由：由於模塊鏈接只要點擊就會刷新當前頁面及左側菜單，若是值刷新右側內容也就不會出現這樣的狀況。html

可是在左側菜單做爲模板頁是必需要刷新的，例如在模塊管理下添加一個模塊，要馬上顯示當前添加的模塊。java

若是引用iframe的方法只刷新右側內容也不能解決當前的問題，何況iframe的性能並非特別好。因此這裏不建議採用jquery

iframe。cookie

3.問題解決：ide

抓住一個重點，只要點擊二級菜單，勢必會刷新整個頁面。在不刷新的狀況下LayUI的自帶的效果是這樣性能

既然他要刷新就將計就計，在它未刷新的時候保存該父級和子級的id,保存到cookie中，而後等待他刷新的時候，ui

再取出id值利用樣式循環遍歷使他保持原來的LayUI自帶的效果。this

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">

@{Html.RenderAction("Header", "Shared");}

@{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>

<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)

//寫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>