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

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2015-09-05
通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单

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

菜单的HTML结构:

<div class="treemenu">
<ul>
<li>
<a href="#" >一级菜单一</a>
<div class="submenu" >
<ul>
<li><a href="subpage/a.html" >二级菜单一</a></li>
<li><a href="subpage/b.html" >二级菜单二</a></li>
<li><a href="#" >二级菜单三</a></li>
<li><a href="#" >二级菜单四</a></li>
<li><a href="#" >二级菜单五</a></li>
</ul>
</div>
</li>
<li>
<a href="#" >一级菜单二</a>
<div class="submenu" >
<ul>
<li>
<a href="#" >二级菜单一</a>
<div class="submenu" >
<ul>
<li><a href="#" >三级菜单一</a></li>
<li><a href="#" >三级菜单二</a></li>
<li>
<a href="#" >三级菜单三</a>
<div class="submenu" >
<ul>
<li><a href="#" >四级菜单一</a></li>
<li><a href="#" >四级菜单二</a></li>
<li><a href="#" >四级菜单三</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#" >二级菜单二</a></li>
<li><a href="#" >二级菜单三</a></li>
<li><a href="#" >二级菜单四</a></li>
<li><a href="#" >二级菜单五</a></li>
</ul>
</div>
</li>
<li>
<a href="#" >一级菜单三</a>
<div class="submenu" >
<ul>
<li><a href="#" >二级菜单一</a></li>
<li><a href="#" >二级菜单二</a></li>
<li><a href="#" >二级菜单三</a></li>
<li><a href="#" >二级菜单四</a></li>
<li><a href="#" >二级菜单五</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:

【JavaScript】刷新不变化树形菜单(多级菜单).zip

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 使用js操作cookie的一点小收获分享
    js操作cookie想必大家并不陌生吧,本文积累了一点小经验,在此与大家分享下,希望对大家有所帮助为了说清楚这个问题,必须从头说起. 首先从后台配置一个参数,放到一个字段里,该字段叫做keywords,这个参数的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerpo ...
  • js封装cookie操作的函数代码
    这篇文章主要通过js封装cookie的函数代码,想用js实现cookies操作的朋友可以参考下核心代码: 如需引入外部Js需刷新才能执行]
  • JS通过Cookie判断页面是否为首次打开
    这篇文章主要介绍了JS通过Cookie判断页面是否为首次打开 的相关资料,需要的朋友可以参考下废话不多说了,直接给大家贴代码了,本文写的不好还请各位大侠见谅. JScript code: function Cookie(key,value) { this.key=key; if(value!=null) { this.value=escape(value); ...
  • JS封装cookie操作函数实例(设置、读取、删除)
    这篇文章主要介绍了JS封装cookie操作函数,以实例形式分析了JavaScript实现针对cookie的设置.获取及删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: /*设置cookie*/ function setCookie(name, value, iDay) { v ...
  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码
    JS实现无限级网页折叠菜单(类似树形菜单)效果代码
    这篇文章主要介绍了JS实现无限级网页折叠菜单类似树形菜单效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家 ...
猜你喜欢