Establezca la cookie para guardar el estado del menú del árbol y releer la cookie cuando se cargue la página.
La estructura HTML del menú:
<div> <ul> <li> <a href = "#" id = "TreemeNU_A_1"> Menú de primer nivel 1 </a> <div id = "submenu_1"> <ul> <li> <a href = "subpage/a.html" id = "submenuu_a_1"> menú de segundo nivel 1 </a> </li> <a a a a que> <a. href = "subpage/b.html" id = "submenu_a_1_2"> Menú de segundo nivel 2 </a> </li> <li> <a href = "#" id = "Submenu_a_1_3"> Menú de segundo nivel 3 </a> </li> <li> <a href = "#" Id = "Submenuuuu_A_1_4" "" 4</a></li><li><a href="#" id="submenu_a_1_5">Second-level menu 5</a></li></ul></div><li><a href="#" id="treemenu_a_2">First-level menu 2</a><div id="submenu_2"><ul><li><a 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ú de segundo nivel 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3"> Menú 3 </a> <Div Id = "Subtenu_2_3"> <ul> <li> <i <a href = "#"#"#" "#" "#" "#" id = "Submenu_A_2_1_3_1"> Nivel 4 Menú 1 </a> </li> <li> <a href = "#" id = "Submenu_a_2_1_3_2"> Nivel 4 Menú </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3_3"> Menú de nivel 4 3 </a> </li> </ul> </div> </li> <li> <a href = "#" id = "submenu_a_2_2"> Menú de segundo nivel 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_3"> Menú de segundo nivel 3 </a> </li> <l> <a href = "#"#" id = "submenu_a_2_4"> menú de segundo nivel 4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5"> menú de segundo nivel 5 </a> </li> </ul> </li> <li> <a href = "#" id = "Treemenu_3"> Segundo 3 </ain 3 </aa> id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1"> menú de segundo nivel 1 </a> </li> <li> <a href = "#" id = "Subtenu_a_3_2"> Menú de segundo nivel 2 </a> </li> <li> <li> <a href = "#"#"#" id = "submenu_a_3_3"> Menú de segundo nivel 3 </a> </li> <li> <a href = "#" id = "submenu_a_3_4"> menú de segundo nivel 4 </a> </li> <li> <a href = "#" id = "submenu_a_3_5"> menú de segundo nivel 5 </a> </li> </ul> </div> </li> </ul> </div>
Lea la clase de herramientas de cookies:
// clase de herramienta de cookie var cookietool = {// lea 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_name.length + 1; document.cookie.indexof (";", c_start); if (c_end == -1) {c_end = document.cookie.length;} return unescape (document.cookie.substring (c_start, c_end));}} return "";}, // set CookieSsetcookie: function (c_name, value, expirate) Date (); exDate.setDate (exDate.getDate () + expirado); // establecer date document.cookie = c_name + "=" + escape (valor) + ((expiredays == null)? "": "; Expires =" + exDate.togmtString ());}, // delete cookiedelcookie: function (c_name) {var exDate = new date (); exDate.setDate (exDate.getDate () - 1); // Fecha de ayer documento.cookie = c_name + "=; expires =" + exDate.TogmtString ();}};Vínculos del evento del menú:
// Evento de menú vinculando $ ('. TreeMenu a'). Bind ('click', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('. Submenu'); if ($ submenu.length> 0) {// está un submenu var flag = $ (this) .next ('.'. > 0? Verdadero: falso; if (flag) {$ submenu.show ();} else {$ submenu.hide ();} var display = flag ' Cookietool.getCookie (id); $ ('. Treemenu'). Find ('. On'). RemoveClass ('on'). AddClass ('Off'); $ ('#' + Curid) .addclass ('on'); $ ('. Treemenu a [class = "Off"]'). cada (function () { Cookietool.delcookie ($ (this) .attr ('id'));Restablecer el menú cuando se carga la página
// La página Carga Leer Cookies $ ('. TreeMenu a'). Cada (function () {showMenu ($ (this) .Attr ('id'));}); // La función de menú de visualización de cookie de lectura showmenu (id) {var $ this = $ ('#' it); var Cookie = Cookiitool.getcookie (id); If (Cookie) {if (Cookie) {if (Cookie) ($ this.next ('. Submenu'). Longitud> 0) {$ this.next ('. Submenu'). Css ('Display', Cookie);} else {$ ('#' + cookie) .addclass ('on');}}}}}Demostración completa:
【JavaScript】 Actualice el menú de árboles sin cambios (menú de niveles múltiples) .zip
Nota: La consola de Chrome local no puede leer cookies, y debe probarse en Firefox/IE o en el entorno del servidor