Atur cookie untuk menyimpan status menu pohon, dan baca kembali cookie saat halaman dimuat.
Struktur HTML menu:
<veT> <ul> <li> <a href = "#" id = "treemenu_a_1"> menu tingkat pertama 1 </a> <div id = "submenu_1"> <ul> <li> <a href = "subpage/a.html" id = "submenu_a_1_1_1"> menu kedua </a> <a> <a> </li </li </li </a </a </a. href = "subpage/b.html" id = "submenu_a_1_2"> menu tingkat kedua 2 </a> </li> <li> <a href = "#" id = "Submenu_A_1_3"> Menu tingkat kedua </a> </li> <li> <level <"level ="#"#"#"#"#"#"#"#"#"#"#"/#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" 4 </a> </li> <li> <a href = "#" id = "submenu_a_1_5"> Menu tingkat kedua 5 </a> </li> </ul> </div> <li> <a href = "#" ID = "treemenu_a_2"> Menu tingkat pertama </a> <"<" "" " id = "submenu_a_2_1"> menu tingkat kedua 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_1"> menu tingkat kedua 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_1" href = "#" id = "submenu_a_2_1_2"> Menu tingkat kedua 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3"> Menu level 3 </a> <v ID = "Subrowu_2_1_3"> <ul> </a> <Div ID = "Submenu_2_1_3"> <ul> <li> </a> <Div ID = "Submenu_2_1_3"> <ul> <li> <a> id = "submenu_a_2_1_3_1"> level 4 menu 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3_2"> Level 4 Menu 2 </a> </li> <li3_3> <a href = "#" ID = "SmVenu_a_2_2_2_.a. 3</a></li></ul></div></li><li><a href="#" id="submenu_a_2_2">Second-level menu 2</a></li><li><a href="#" id="submenu_a_2_3">Second-level menu 3</a></li><li><a href="#" id = "submenu_a_2_4"> Menu tingkat kedua 4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5"> Menu tingkat kedua 5 </a> </li> </ul> </li> <a href = "#" ID = "TREEMENU_A_. id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1"> menu tingkat kedua 1 </a> </li> <li> <a href = "#" id = "Submenu_a_3_2"> Menu tingkat kedua 2 </a> </li> </li> "haP ="#" id = "submenu_a_3_3"> Menu tingkat kedua 3 </a> </li> <li> <a href = "#" id = "submenu_a_3_4"> menu tingkat kedua 4 </a> </li> <li> <a href = "#" id = "submenu_a_3_3_5"> <a href = "#" ID = "Submenu_a_3_3_5"> kedua "> kedua level kedua ="#"#" 5 </a> </li> </ul> </div> </li> </ul> </div>
Baca Kelas Alat Cookie:
// Kelas Alat Cookie Var cookietool = {// Baca cookieGetCookie: function (c_name) {if (document.cookie.length> 0) {c_start = document.cookie.indexof (c_name + "="); if (c_start! = -1) {c_start = c_start = c_start! document.cookie.indexof (";", c_start); if (c_end == -1) {c_end = document.cookie.length;} return unescape (document.cookie.substring (c_start, c_end));} return "";}, // atur cookiessetcook: {cookie): {cookie); Date (); exdate.setDate (exdate.getDate () + kedaluwarsa); // Setel tanggal dokumen.cookie = c_name + "=" + Escape (value) + ((Expiredays == null)? "": "; Expires =" + exdate.togmtString ());}, // hapus cookiedelcookie: function (c_name) {var exdate = new date (); // Dokumen Tanggal Kemarin.cookie = c_name + "=;; Expires =" + exdate.togmtString ();}};Mengikat Acara Menu:
// Menu Event Binding $ ('. TreeMenu a'). Bind ('Click', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('. Subrowu'); if ($ submenu.length> 0) {// ada submenu '); if ($ submenu.length> 0) {// ada submenu'); $ (ini) .Next ('. Submenu: Hidden'). Panjang> 0? cookietool.getcookie (id); $ ('. TreeMenu'). Temukan ('. cookietool.delcookie ($ (ini) .attr ('id'));Setel ulang menu saat halaman memuat
// Halaman memuat cookies baca $ ('. TREEMENU A'). Masing -masing (function () {showmenu ($ (this) .attr ('id'));}); // Fungsi menu tampilan cookie baca showmenu (id) {var $ this = $ ('#' + id); varie cookie = cookietool. ($ this.next ('. submenu'). Length> 0) {$ this.next ('. Subwenu'). CSS ('display', cookie);} else {$ ('#' + cookie) .addclass ('on');}}}}Demo Lengkap:
【JavaScript】 Segarkan menu pohon yang tidak berubah (menu multi-level) .zip
Catatan: Konsol Chrome lokal tidak dapat membaca cookie, dan perlu diuji di lingkungan Firefox/IE atau server