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. [转]Github 下载指定文件夹

    来自:https://blog.csdn.net/qq_35860352/article/details/80313078 操作步骤 step1:转换链接地址 点开”/examples”子文件,复制浏 ...

  2. kafka性能调优(转)

    原文  https://blog.csdn.net/weixin_39478115/article/details/79155287 Broker参数配置 1.网络和io操作线程配置优化 # brok ...

  3. MySQL-count(*)和count(1)的查询区别

    一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的 假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键的話 ...

  4. Broadcom BCM94352z/DW1560驱动新姿势

    转自:https://blog.daliansky.net/Broadcom-BCM94352z-DW1560-drive-new-posture.html Broadcom WiFi/BlueToo ...

  5. InetSim配置使用

    参考网址: http://techanarchy.net/2013/08/installing-and-configuring-inetsim/ https://blog.csdn.net/isins ...

  6. Java 环境配置 与 碰到的问题

    小白记录,希望各位指点,长期整理修改 不定期更新,碰到的与之相关的会添加,做个小笔记,再次碰到可以更好的解决. JDK 下载:Oracle 配置方法:菜鸟教程 - Java 开发环境配置 作用 JAV ...

  7. SQL查询某库所有的表所有的字段及字段的属性

    then d.name else null end) 表名, a.colorder 字段序号, a.name 字段名, ( then '√'else '' end) 标识, ( then '√' el ...

  8. piggy.lzo

    编译内核的时候出现错误:arch/arm/boot/compressed/piggy.lzo.S:4: Error: file not found: arch/arm/boot/compressed/ ...

  9. 在VS2015中用C++编写可被C#调用的DLL

    VS2015用C++创建动态库DLL步骤如下: (1)启动VS2015-->文件-->新建-->项目,按图二进行选择,选择Win32项目,弹出创建窗口,如第二张图.注意.net版本根 ...

  10. RN-入门基础

    Props State 一切界面变化,都是state变化 state修改必须通过setState方法 this.state.like=true 这样复制无效 setState是一个merge合并的操作 ...