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数组去掉重复
May 12 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
vue项目接口域名动态获取操作
Aug 13 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
hadoop中一些常用的命令介绍
2013/06/19 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
中学门卫岗位职责
2013/12/26 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
《影子》教学反思
2014/02/21 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
素质拓展训练感想
2015/08/07 职场文书
家访教师心得体会
2016/01/23 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
mysql部分操作
2021/04/05 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers