


js menggunakan kuki untuk menyegarkan menu pokok tanpa mengubah kemahiran it_javascript
May 16, 2016 pm 04:32 PMSimpan keadaan menu pokok dengan menetapkan kuki dan baca semula kuki apabila halaman dimuatkan untuk menetapkan menu.
Struktur HTML menu:
<div class="treemenu"> <ul> <li> <a href="#" id="treemenu_a_1">一级菜单一</a> <div class="submenu" 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> <a href="#" id="treemenu_a_2">一级菜单二</a> <div class="submenu" id="submenu_2"> <ul> <li> <a href="#" id="submenu_a_2_1">二级菜单一</a> <div class="submenu" id="submenu_2_1"> <ul> <li><a href="#" id="submenu_a_2_1_1">三级菜单一</a></li> <li><a href="#" id="submenu_a_2_1_2">三级菜单二</a></li> <li> <a href="#" id="submenu_a_2_1_3">三级菜单三</a> <div class="submenu" id="submenu_2_1_3"> <ul> <li><a href="#" id="submenu_a_2_1_3_1">四级菜单一</a></li> <li><a href="#" id="submenu_a_2_1_3_2">四级菜单二</a></li> <li><a href="#" id="submenu_a_2_1_3_3">四级菜单三</a></li> </ul> </div> </li> </ul> </div> </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> <a href="#" id="treemenu_a_3">一级菜单三</a> <div class="submenu" 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>
Baca kelas alat kuki:
//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(); } };
Pengikatan acara menu:
//菜单事件绑定 $('.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 }); } });
Tetapkan semula menu apabila halaman dimuatkan
//页面加载读取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 Penuh:
[JavaScript] Muat semula tidak mengubah menu pokok (menu berbilang peringkat).zip
Nota: Konsol tempatan Chrome tidak boleh membaca kuki dan perlu diuji dalam firefox/IE atau persekitaran pelayan

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

6 Cara untuk Muat Semula Halaman Web pada iPhone

Kunci muat semula F5 tidak berfungsi dalam Windows 11

Bagaimana untuk memuat semula halaman web dengan cepat?

Penjelasan terperinci tentang tempat kuki penyemak imbas disimpan
