js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單
通過設(shè)置cookie來保存樹形菜單的狀態(tài),在頁面加載時(shí)重新讀取cookie來設(shè)置菜單。
菜單的HTML結(jié)構(gòu):
<div class="treemenu"> <ul> <li> <a href="#" id="treemenu_a_1">一級(jí)菜單一</a> <div class="submenu" id="submenu_1"> <ul> <li><a href="subpage/a.html" id="submenu_a_1_1">二級(jí)菜單一</a></li> <li><a href="subpage/b.html" id="submenu_a_1_2">二級(jí)菜單二</a></li> <li><a href="#" id="submenu_a_1_3">二級(jí)菜單三</a></li> <li><a href="#" id="submenu_a_1_4">二級(jí)菜單四</a></li> <li><a href="#" id="submenu_a_1_5">二級(jí)菜單五</a></li> </ul> </div> </li> <li> <a href="#" id="treemenu_a_2">一級(jí)菜單二</a> <div class="submenu" id="submenu_2"> <ul> <li> <a href="#" id="submenu_a_2_1">二級(jí)菜單一</a> <div class="submenu" id="submenu_2_1"> <ul> <li><a href="#" id="submenu_a_2_1_1">三級(jí)菜單一</a></li> <li><a href="#" id="submenu_a_2_1_2">三級(jí)菜單二</a></li> <li> <a href="#" id="submenu_a_2_1_3">三級(jí)菜單三</a> <div class="submenu" id="submenu_2_1_3"> <ul> <li><a href="#" id="submenu_a_2_1_3_1">四級(jí)菜單一</a></li> <li><a href="#" id="submenu_a_2_1_3_2">四級(jí)菜單二</a></li> <li><a href="#" id="submenu_a_2_1_3_3">四級(jí)菜單三</a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#" id="submenu_a_2_2">二級(jí)菜單二</a></li> <li><a href="#" id="submenu_a_2_3">二級(jí)菜單三</a></li> <li><a href="#" id="submenu_a_2_4">二級(jí)菜單四</a></li> <li><a href="#" id="submenu_a_2_5">二級(jí)菜單五</a></li> </ul> </div> </li> <li> <a href="#" id="treemenu_a_3">一級(jí)菜單三</a> <div class="submenu" id="submenu_3"> <ul> <li><a href="#" id="submenu_a_3_1">二級(jí)菜單一</a></li> <li><a href="#" id="submenu_a_3_2">二級(jí)菜單二</a></li> <li><a href="#" id="submenu_a_3_3">二級(jí)菜單三</a></li> <li><a href="#" id="submenu_a_3_4">二級(jí)菜單四</a></li> <li><a href="#" id="submenu_a_3_5">二級(jí)菜單五</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 ""; }, //設(shè)置cookie setCookie: function(c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); //設(shè)置日期 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')); //刪除其他已選擇選項(xiàng)cookie }); } });
頁面加載時(shí)重新設(shè)置菜單
//頁面加載讀取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】刷新不變化樹形菜單(多級(jí)菜單).zip
注意:chrome本地控制臺(tái)無法讀取cookie,需要在firefox/IE或者服務(wù)器環(huán)境下測(cè)試
相關(guān)文章
利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實(shí)現(xiàn)造日歷輪子的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫,有加速減速啟動(dòng)停止功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
這篇文章主要介紹了推薦三款日期選擇插件,My97DatePicker、用于PC端的jquery.datepicker,以及專注于移動(dòng)端的Mobiscroll,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04在點(diǎn)擊div中的p時(shí),如何阻止事件冒泡
本文主要介紹了在點(diǎn)擊div中的p時(shí),如何阻止事件冒泡的方法,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換的相關(guān)資料,需要的朋友可以參考下2016-01-01