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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
解决layer.open后laydate失效的问题
Sep 06 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
判断字符串的长度(优化版)中文占两个字符
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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP数组实例详解
2016/06/26 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
详解Vue之计算属性
2020/06/20 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
简单介绍django提供的加密算法
2019/12/18 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
应聘收银员个人的求职信
2013/11/30 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
高中教师个人工作总结
2015/02/10 职场文书
复兴之路展览观后感
2015/06/02 职场文书
股东出资协议书
2016/03/21 职场文书