Stellen Sie den Cookie ein, um den Status des Baummenüs zu speichern, und lesen Sie das Cookie erneut, wenn die Seite geladen wird.
Die HTML -Struktur des Menüs:
<div> <ul> <li> <a href = "#" id = "treemenu_a_1"> Menü der ersten Ebene 1 </a> <div id = "submenu_1"> <ul> <li> <a href = "subsce/a.htmL" id = "submenu_a_1_1_1"> zweites Level-Menü 1/a> </li> <a <a href="subpage/b.html" id="submenu_a_1_2">Second-level menu 2</a></li><li><a href="#" id="submenu_a_1_3">Second-level menu 3</a></li><li><a href="#" id="submenu_a_1_4">Second-level menu 4; href="#" id="submenu_a_2_1">Second-level menu 1</a></li><li><a href="#" id="submenu_a_2_1_1">Second-level menu 1</a></li><li><a href="#" id="submenu_a_2_1_1">Second-level menu 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_2"> Menü der zweiten Ebene 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3"> Level 3-Menü 3 </a> <div id = "submenu_a_2_1_3" <ul> </a> <div id = "subMenu_2_2_1_1_3" <ul> < href="#" 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><li><a href="#" id="submenu_a_2_1_3_3">Level 4 Menu 3 </a> </li> </ul> </div> </li> <li> <a href = "#" id = "submenu_a_2_2"> Menü der zweiten Ebene </a> </li> <li> <a href = "#" id = "submenu_a_2_3"> Second-Level-Menü#"#"#"#"#"#"#"#"#"#". id = "submenu_a_2_4"> Menü der zweiten Ebene 4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5"> Menü mit zweiter Ebene. id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1"> Menü der zweiten Ebene 1 </a> </li> <li> <a href = "#" id = "submenu_a_3_2"> Second-Level-Menü 2 </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <- id = "submenu_a_3_3"> Menü der zweiten Ebene 3 </a> </li> <li> <a href = "#" id = "submenu_a_3_4"> Menü in der zweiten Ebene 4 </a> </li> <li> <a href = "#" id = "submenu_a_3_5"> Second-Level-Menü-Menü-Menü-Menü-Menü-Menü " 5 </a> </li> </ul> </div> </li> </ul> </div>
Cookie Tool Class lesen:
// Cookie Tool Class var Cookietool = {// CookieGetcookie: Funktion (c_name) {if (document.cookie.length> 0) {c_start = document.cookie.indexof (c_name + "="); if (c_start! document.cookie.indexof (";", c_start); if (c_end == -1) {c_end = document.cookie.length;} return Unscape (document.cookie.substring (c_start, c_end)); Date (); exDate.setDate (exDate.getDate () + abgelaufen); // Datumsdokument festlegen. // gestern Datumsdokument.cookie = c_name + "=; expires =" + exDate.togmtstring ();}};Menüereignisbindung:
// Menüereignisbindung $ ('. Treemenu a'). Bind ('klick', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('. Submenu'); if ($ submenu.length> 0) {// // IS ist ein Submenu var =/////// // ist ein submenu var = var Flag = var = $ (this) .Next ('. Submenu: Hidden'). Länge> 0 wahr: false; if (Flag) {$ submenu.show ();} else {$ submenu.hide ();} var display = Flag? Cookietool.getCookie (id); Cookietool.delcookie ($ (this) .Attr ('id'));Menü zurücksetzen, wenn die Seite geladen wird
// Die Seite lädt Cookies $ ('. Treemenu a'). Jeder (function () {showMenu ($ (this) .Attr ('id');}); // Die Menüfunktion des Lesekoks -Displays Showmenu (id) {var $ this = $ ('#' + id); ($ this.next ('. submenu'). Länge> 0) {$ this.next ('. submenu').Komplette Demo:
【JavaScript】 Veränderter Baummenü (mehrstufiges Menü) .zip
Hinweis: Die lokale Chromkonsole kann keine Cookies lesen, und sie muss in Firefox/IE oder Server -Umgebung getestet werden