js 通过cookie实现刷新不变化树形菜单


Posted in Javascript onOctober 30, 2014

通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单。

菜单的HTML结构:

<div class="treemenu">
<ul>
<li>
<a href="#" id="treemenu_a_1">一级菜单一</a>
<div class="submenu" id="submenu_1">
<ul>
<li><a href="subpage/a.html" id="submenu_a_1_1">二级菜单一</a></li>
<li><a href="subpage/b.html" id="submenu_a_1_2">二级菜单二</a></li>
<li><a href="#" id="submenu_a_1_3">二级菜单三</a></li>
<li><a href="#" id="submenu_a_1_4">二级菜单四</a></li>
<li><a href="#" id="submenu_a_1_5">二级菜单五</a></li>
</ul>
</div>
</li>
<li>
<a href="#" id="treemenu_a_2">一级菜单二</a>
<div class="submenu" id="submenu_2">
<ul>
<li>
<a href="#" id="submenu_a_2_1">二级菜单一</a>
<div class="submenu" id="submenu_2_1">
<ul>
<li><a href="#" id="submenu_a_2_1_1">三级菜单一</a></li>
<li><a href="#" id="submenu_a_2_1_2">三级菜单二</a></li>
<li>
<a href="#" id="submenu_a_2_1_3">三级菜单三</a>
<div class="submenu" id="submenu_2_1_3">
<ul>
<li><a href="#" id="submenu_a_2_1_3_1">四级菜单一</a></li>
<li><a href="#" id="submenu_a_2_1_3_2">四级菜单二</a></li>
<li><a href="#" id="submenu_a_2_1_3_3">四级菜单三</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#" id="submenu_a_2_2">二级菜单二</a></li>
<li><a href="#" id="submenu_a_2_3">二级菜单三</a></li>
<li><a href="#" id="submenu_a_2_4">二级菜单四</a></li>
<li><a href="#" id="submenu_a_2_5">二级菜单五</a></li>
</ul>
</div>
</li>
<li>
<a href="#" id="treemenu_a_3">一级菜单三</a>
<div class="submenu" id="submenu_3">
<ul>
<li><a href="#" id="submenu_a_3_1">二级菜单一</a></li>
<li><a href="#" id="submenu_a_3_2">二级菜单二</a></li>
<li><a href="#" id="submenu_a_3_3">二级菜单三</a></li>
<li><a href="#" id="submenu_a_3_4">二级菜单四</a></li>
<li><a href="#" id="submenu_a_3_5">二级菜单五</a></li>
</ul>
</div>
</li>
</ul>
</div>

读取cookie工具类:

//cookie工具类
var cookieTool = {
//读取cookie
getCookie: function(c_name) {
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');
}
}
}

完整DEMO:

注意:chrome本地控制台无法读取cookie,需要在firefox/IE或者服务器环境下测试

Javascript 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
判断字符串的长度(优化版)中文占两个字符
Oct 30 #Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 #Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 #Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 #Javascript
如何调试异步加载页面里包含的js文件
Oct 30 #Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 #Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python的对象传递与Copy函数使用详解
2019/12/26 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
软件测试题目
2013/02/27 面试题
会计自我鉴定
2013/11/02 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
年度考核评语
2014/01/19 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年统战工作总结
2015/05/19 职场文书
感动中国何玥观后感
2015/06/02 职场文书
珍爱生命主题班会
2015/08/13 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL