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

来源：互联网发布：mac版qq接收群文件编辑：程序博客网时间：2024/04/27 19:51

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

设置cookies

//设置cookiesfunction 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);}

//读取cookiesfunction 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>

完整例子下载：

点击打开链接

0 0