欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單

 更新時(shí)間:2014年10月30日 17:03:13   投稿:whsnow  
通過設(shè)置cookie來保存樹形菜單的狀態(tài),在頁面加載時(shí)重新讀取cookie來設(shè)置菜單

通過設(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閉包詳解

    JavaScript閉包詳解

    這篇文章主要為大家介紹了JavaScript閉包,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • JS調(diào)用打印機(jī)功能簡單示例

    JS調(diào)用打印機(jī)功能簡單示例

    這篇文章主要介紹了JS調(diào)用打印機(jī)功能的方法,結(jié)合完整實(shí)例形式分析了javascript打印機(jī)功能的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
    2016-11-11
  • 利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼

    利用原生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-05
  • JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫

    JS使用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、jquery.datepicker、Mobiscroll)

    這篇文章主要介紹了推薦三款日期選擇插件,My97DatePicker、用于PC端的jquery.datepicker,以及專注于移動(dòng)端的Mobiscroll,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • 在點(diǎn)擊div中的p時(shí),如何阻止事件冒泡

    在點(diǎn)擊div中的p時(shí),如何阻止事件冒泡

    本文主要介紹了在點(diǎn)擊div中的p時(shí),如何阻止事件冒泡的方法,具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換

    JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換的相關(guān)資料,需要的朋友可以參考下
    2016-01-01
  • webpack常用配置總覽(小結(jié))

    webpack常用配置總覽(小結(jié))

    這篇文章主要介紹了webpack常用配置總覽(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 詳解組件庫的webpack構(gòu)建速度優(yōu)化

    詳解組件庫的webpack構(gòu)建速度優(yōu)化

    這篇文章主要介紹了詳解組件庫的webpack構(gòu)建速度優(yōu)化,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • js 瀏覽器事件介紹

    js 瀏覽器事件介紹

    瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件,如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus 等
    2012-03-03

最新評(píng)論