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. 前端-JavaScript2-5——JavaScript之运算符进阶

    运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 运算符的分类见仁见智,我们的课程对运算符进行如下分类: 数学运算符(Arithmetic operators) 比较运算符(Co ...

  2. IE6设置li的float:left，不能自适应宽的解决方法

    原文地址:https://blog.csdn.net/u012299002/article/details/50589453 做个divcss页面,发现在IE6下,设置了li的float:left,L ...

  3. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  4. linux最小化安装后的初始化

    Linux 最小化安装以后 linux会缺失很多功能,需要我们预先安装一些软件服务,例如mysql(mariadb),gcc等等. 但是最小化的mysql甚至不提供ifconfig,也没有wget命令 ...

  5. java中抽象类是否可以继承实体类？

    一道java 常见面试题,网上找到的几乎每个 java 面试笔试题大全或集锦里都能找到这道题. 题目如下:问: 抽象类是否可继承实体类 (concrete class) 答: 抽象类是可以继承实体类, ...

  6. 推介一个学习JAVA的系列教程-狗鱼IT教程

    介绍一个学JAVA的零基础学习JAVA的网站,推介一个学习JAVA的系列教程-狗鱼IT教程 下面是java的系教程: 1､[java教程]Java 教程 2､[java教程]Java 简介 3､[ja ...

  7. redis哨兵架构的基础知识及部署和管理

    一.前言 1.哨兵的介绍 sentinal,中文名是哨兵 哨兵是redis集群架构中非常重要的一个组件,主要功能如下 ()集群监控,负责监控redis master和slave进程是否正常工作 ()消 ...

  8. java连Oracle连接字符串写法

    JDBC URL: 1.ServiceName方式:jdbc:oracle:thin:@//<host>:<port>/ServiceName 如果是集群,不知道为什么是在配置 ...

  9. zabbix3.0.4 探索主机Discovery自动发现agent主机和zabbix-agent自动注册详细图文教程

    Zabbix 自动发现(Discovery)功能使用 随着监控主机不断增多,有的时候需要添加一批机器,特别是刚用zabbix的运维人员需要将公司的所有服务器添加到zabbix,如果使用传统办法去单个添 ...

  10. sqlPlus基本操作

    SQL*PLUS连接方法 1. $ sqlplus "user/password[@service] [as sysdba]" 2. $ sqlplus /nolog SQL> ...