代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的):
 
<style>
.sidebar-menu .special{
font-size: 16px;
margin-bottom:6px;
}
.sidebar-menu ul,li{padding:0;margin:0;}
.sidebar-menu .black{
background-color:#2c3b41;
}
.sidebar-menu .size{
font-size: 18px;
}
</style> <div class="treemenu">
<ul class="sidebar-menu">
<li class="header">主菜单</li> <!--基本信息查询-->
<li class="treeview">
<a href="#" id="treemenu_a_2"><i class="glyphicon glyphicon-search"></i> <span class="size"> 基本信息查询</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_2">
<ul class="black">
<li class="special" ><a href="/searchCor.html" id="submenu_a_2_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 尾矿库信息查询 </a></li>
</ul>
</div>
</li>
<!--地理信息查询-->
<li class="treeview">
<a href="#" id="treemenu_a_8"><i class="fa fa-database"></i> <span class="size"> 地理信息查询</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_8">
<ul class="black">
<li class="special" ><a href="" onclick="window.open('/baseGeoInfo.html')" id="submenu_a_8_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i>基础地理信息</a></li>
<li class="special" ><a href="" onclick="window.open('/runInfo.html')" id="submenu_a_8_2"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i>运行动态信息</a></li>
<li class="special" ><a href="" onclick="window.open('/helpInfo.html')" id="submenu_a_8_3"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i>应急救援信息</a></li>
<li class="special" ><a href="" onclick="window.open('/accidentInfo.html')" id="submenu_a_8_4"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i>事故范围模拟</a></li> </ul>
</div>
</li>
<!--基本信息管理-->
<li class="treeview">
<a href="#" id="treemenu_a_1"><i class="fa fa-database"></i> <span class="size"> 基本信息管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_1">
<ul class="black">
<li class="special" ><a href="/corInf.html" id="submenu_a_1_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 企业信息管理 </a></li>
<li class="special" ><a href="/basicInf.html?p=1" id="submenu_a_1_2"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o" ></i> 尾矿库信息管理 </a></li>
<li class="special" ><a href="/EngineeringInf.html?p=1" id="submenu_a_1_3"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 工程信息管理 </a></li>
<li class="special" ><a href="/remediationInf.html" id="submenu_a_1_4"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 整治信息管理 </a></li>
<li class="special" ><a href="/securityInf.html" id="submenu_a_1_5"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 安全现状信息管理 </a></li>
<li class="special" ><a href="/emergencyinf.html" id="submenu_a_1_6"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 应急预案信息管理 </a></li>
<li class="special" ><a href="/retireinf.html" id="submenu_a_1_7"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 退役信息管理 </a></li>
<li class="special" ><a href="/intelligence.html" id="submenu_a_1_8"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 尾矿库建造许可证 </a></li>
<li class="special" ><a href="/run.html" id="submenu_a_1_9"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o" ></i> 尾矿库运行许可证 </a></li>
<li class="special" ><a href="/retired.html" id="submenu_a_1_10"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 尾矿库退役许可证 </a></li>
<li class="special" ><a href="/importdata.html" id="submenu_a_1_11"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 批量信息导入 </a></li>
</ul>
</div>
</li>
<!--地理信息管理-->
<li class="treeview">
<a href="#" id="treemenu_a_5"><i class="glyphicon glyphicon-tasks"></i> <span class="size"> 地理信息管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_7">
<ul>
<li class="special" ><a href="" onclick="window.open('/getArcgisPoint.html')" id="submenu_a_7_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 获取路线点 </a></li>
<li class="special" ><a href="" onclick="window.open('/getArcgis3DPoints.html')" id="submenu_a_7_2"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o" ></i> 获取路线点3D </a></li>
<li class="special" ><a href="/relationManage.html" id="submenu_a_7_3"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 地图关系表管理 </a></li>
<li class="special" ><a href="/DamRelationManage.html" id="submenu_a_7_7"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 地图干滩关系表管理 </a></li>
<li class="special" ><a href="/ImportDamPoint.html" id="submenu_a_7_5"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 上传溃坝点状图 </a></li>
<li class="special" ><a href="/gisdata.html" id="submenu_a_7_8"><i>&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 尾矿库GIS可视化 </a></li>
</ul>
</div>
</li>
<!--路线规划-->
<li class="treeview">
<a href="#" id="treemenu_a_3"><i class="glyphicon glyphicon-road"></i> <span class="size"> 路线图</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_3">
<ul class="black">
<li class="special" ><a href="" onclick="window.open('/gdRoutePlan.html')" id="submenu_a_3_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 驾车路线图 </a></li>
<li class="special" ><a href="" onclick="window.open('/walkRoutePlaning.html')" id="submenu_a_3_2"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o" ></i> 步行路线图 </a></li>
<li class="special" ><a href="" onclick="window.open('/ridingRoutePlan.html')" id="submenu_a_3_3"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 骑车路线图 </a></li> </ul>
</div>
</li>
<!--系统管理-->
<li class="treeview">
<a href="#" id="treemenu_a_6"><i class="glyphicon glyphicon-user"></i> <span class="size"> 系统维护</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<div class="submenu" id="submenu_6">
<ul class="black">
<li class="special" ><a href="/user.html" id="submenu_a_6_1"><i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i><i class="fa fa-circle-o"></i> 用户管理 </a></li>
</ul>
</div>
</li> <li class="treeview">
<a href="/colorselection.html" >
<i class=" glyphicon glyphicon-wrench"></i> <span class="size"> 颜色设置 </span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
</li>
</ul>
</div> <!--保持刷新后ul记忆.-->
<script>
//cookie工具类
var cookieTool = {
//读取cookie
getCookie: function(c_name) {
if(c_name==null){
return "";
} else if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
},
//设置cookie
setCookie: function(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays); //设置日期
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
//删除cookie
delCookie: function(c_name) {
var exdate = new Date();
exdate.setDate(exdate.getDate() - 1); //昨天日期
document.cookie = c_name + "=;expires=" + exdate.toGMTString();
}
};
//菜单事件绑定
$('.treemenu a').bind('click', function() {
var $this = $(this);
var id = $this.attr('id');
var $submenu = $this.next('.submenu');
if ($submenu.length > 0) { //是否有子菜单
var flag = $(this).next('.submenu:hidden').length > 0 ? true : false;
if (flag) {
$submenu.show();
} else {
$submenu.hide();
}
var display = flag ? 'block' : 'none';
cookieTool.setCookie(id, display, 10);
} else {
cookieTool.setCookie(id, id, 10);
var curId = cookieTool.getCookie(id);
$('.treemenu').find('.on').removeClass('on').addClass('off');
$('#' + curId).addClass('on');
$('.treemenu a[class="off"]').each(function() {
cookieTool.delCookie($(this).attr('id')); //删除其他已选择选项cookie
});
}
});
//页面加载读取cookies
$('.treemenu a').each(function() {
showMenu($(this).attr('id'));
}); //读取cookie显示菜单
function showMenu(id) {
var $this = $('#' + id);
var cookie = cookieTool.getCookie(id);
if (cookie) {
if ($this.next('.submenu').length > 0) {
$this.next('.submenu').css('display', cookie);
} else {
$('#' + cookie).addClass('on');
}
}
}
</script>

效果图预览:

通过将展开信息记录在cookie中,实现刷新页面后还可以保持菜单栏的展开。第一次使用由于没有cookie记录会导致菜单全部展开,用过一次之后就可以实现记忆了。

												

JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合的更多相关文章

  1. JS刷新页面后滚动条的位置不变

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  2. 刷新页面后,让控制台的js代码继续执行

    在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...

  3. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  4. vue 页面间使用路由传参数,刷新页面后获取不到参数的问题

    情况 情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页 ...

  5. 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  6. js利用cookie登录网站

    如上图,我们获取到了cookie,接下来利用cookie登录相应的网站. 我用的浏览器是火狐,首先在特定的网站(也就是我们发现XSS漏洞的网站,这里指的是pikachu)F12打开开发者工具,找到控制 ...

  7. selected 刷新页面后selected选中的值保持不表(thinkphp 从控制器assign 传值到js)

    昨晚解决select 刷新页面以后选择的值保持不变,要想让seleted不变,有两种思路, 1,在提交表单的时候,将所选择的option的属性设为checked . 2.将option的value或者 ...

  8. 利用javascript Location访问Url,重定向,刷新页面

    网上转来了, 方便以后查询参考 本文介绍怎么使用javascript Location对象读和修改Url.怎么重载或刷新页面.javascript提供了许多方法访问,修改当前用户在浏览器中访问的url ...

  9. js阻止表单默认提交、刷新页面

    一.阻止刷新页面 在表单中的提交按钮<button></button>标签改为<input type="button">或者在<butto ...

随机推荐

  1. woj1002-Genesis woj1003-birthofnoah woj1004-noah's ark

    title: woj1002-Genesis date: 2020-03-05 categories: acm tags: [acm,woj] 输入输出考虑一下.easy #include <i ...

  2. springboot( 三)redis demo

    redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结构,例如hashes, lists, sets等,同时支持数据持久化.除此之外,Red ...

  3. 2019牛客多校第六场H Pair(数位DP 多个数相关)题解

    题意: 传送门 给你\(A,B,C\),要求你给出有多少对\((x, y)\)满足\(x\in [1,A],y\in [1,B]\),且满足以下任意一个条件:\(x \& y > C\) ...

  4. Dapr 交通控制示例

    Dapr 已在塔架就位 将发射新一代微服务 牛年 dotnet云原生技术趋势 Dapr是如何简化微服务的开发和部署 前面几篇文章都是从大的方面给大家分享Dapr 能帮助我们解决什么问题,微软从开源到1 ...

  5. Sentry React SourceMaps All In One

    Sentry React SourceMaps All In One React https://docs.sentry.io/platforms/javascript/guides/react/ h ...

  6. Pygame 游戏开发 All In One

    Pygame 游戏开发 All In One Pygame Pygame is a library for digital arts, games, music, making, and a comm ...

  7. how to remove duplicates of an array by using js reduce function

    how to remove duplicates of an array by using js reduce function ??? arr = ["a", ["b& ...

  8. css3 units & 1 turn

    css3 units & 1 turn One full circle is 1turn, 180deg === 0.5turn degrees, gradians, radians, tur ...

  9. apollo-server 返回模拟数据

    模式模拟GraphQL数据 const { ApolloServer, gql } = require('apollo-server'); const typeDefs = gql` type Que ...

  10. (转)IP协议详解之子网寻址、子网掩码、构造超网

    原文网址:http://www.cnblogs.com/way_testlife/archive/2010/10/05/1844399.html 子网寻址 1. 从两级IP地址到三级IP地址 < ...