【JavaScript】实现刷新不变化树形菜单

最新推荐文章于 2022-07-09 17:31:49 发布

Monarch_lin

最新推荐文章于 2022-07-09 17:31:49 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： cookie javascript

本文链接：https://blog.youkuaiyun.com/Monarch_lin/article/details/40514235

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

该博客介绍如何使用JavaScript读取cookie并根据cookie中的菜单状态在页面刷新后还原树形菜单。通过事件绑定，当点击菜单时调用设置cookie的函数，确保菜单状态在浏览器刷新后仍能保持不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过javascrip读取保存在cookies的菜单状态，来重新设置菜单。

设置cookies

//设置cookies
function setCookies(c_name, value, expiredays) {
	var exdate = new Date();　　　　
	exdate.setDate(exdate.getDate() + expiredays);　　　　
	document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
	alert(document.cookie);
}

//读取cookies
function getCookies(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的函数

//事件绑定
$(document).ready(function() {
	//一级菜单事件
	$('[id^="treemenu_a"]').bind('click', function() {
		var id = $(this).attr('id');
		var index = $(this).parent().index();
		var $submenu = $(this).next('.sub-menu');
		var flag = $(this).next('.sub-menu:hidden').length > 0 ? true : false;
		if (flag) {
			$submenu.show();
		} else {
			$submenu.hide();
		}
		var display = flag ? 'block' : 'none';
		setCookies(id, display, 10);
	});
	//子菜单事件
	$('[id^="submenu_a"]').bind('click', function() {
		var $this = $(this);
		var id = $this.attr('id');
		var index = $this.closest('[id^="treemenu_li"]').index();
		setCookies('submenu_' + index, id, 10);
		var curId = getCookies('submenu_' + index);
		$this.parent().siblings().find('.on').removeClass('on');
		$('#' + curId).addClass('on');
	});
});

页面加载时读取cookies来设置当前的菜单状态

//页面加载时读取cookies
$(document).ready(function() {
	var menulength = $('[id^="treemenu_a"]').length; //一级菜单个数
	for (var i = 0; i < menulength; i++) {
		$('.sub-menu').eq(i).css('display', getCookies("treemenu_a_" + (i + 1)));
		var id = getCookies('submenu_' + i);
		if (id) {
			$('.sub-menu').eq(i).find('#' + id).addClass('on');
		}
	}
});

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>可记忆树形菜单</title>
	<style>
	.treemenu{width: 200px;float: left;}
	.items-r{margin-left: 300px;}
	.on{background: #EF8711;color: #fff;}
	}
	</style>
</head>
<body>
	<h2>可记忆树形菜单</h2>
	 <div class="treemenu">
	 	<ul id="treemenu_ul">
	 		<li id="treemenu_li_1">
	 			<a href="#" id="treemenu_a_1">菜单一</a>
 				<div class="sub-menu" 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 id="treemenu_li_2">
	 			<a href="#" id="treemenu_a_2">菜单二</a>
 				<div class="sub-menu" id="submenu_2">
 					<ul>
 						<li><a href="#" id="submenu_a_2_1">子菜单一</a></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 id="treemenu_li_3">
	 			<a href="#" id="treemenu_a_3">菜单三</a>
 				<div class="sub-menu" 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>
	 <div class="items-r"><a href="index.html">首页</a></div>
	 <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
	 <script type="text/javascript" src="script/setTreeMenu.js"></script>
	 <script type="text/javascript">
	 </script>
</body>
</html>

完整例子下载：

点击打开链接