Réglez le cookie pour enregistrer l'état du menu des arbres et relisez le cookie lorsque la page se charge.
La structure HTML du menu:
<div> <ul> <li> <a href = "#" id = "Treemenu_a_1"> Menu de premier niveau 1 </a> <div id = "submenu_1"> <ul> <li> <a href = "subpage / a.html" id = "submenu_a_1_1"> menu de niveau secondaire 1 </a> href = "sous-page / b.html" id = "submenu_a_1_2"> menu de deuxième niveau 2 </a> </li> <li> <a href = "#" id = "subMenu_a_1_3"> Menu de deuxième niveau 3 </a> </li> <li> <a href = "#" "id =" submenu_a_1_4 " 4 </a> </li> <li> <a href = "#" id = "submenu_a_1_5"> menu de deuxième niveau 5 </a> </li> </ul> </v> <li> <a href = "#" id = "Treemenu_a_2"> Menu de premier niveau 2 </a> <div Id = "submenu_2"> <ul> href = "#" id = "submenu_a_2_1"> menu de deuxième niveau 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_1"> Menu de niveau secondaire 1 </a> </ li> <li> <a href = "#" id = "subMenu_a_2_1_1"> second-laivel menu 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_2"> Menu de deuxième niveau 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3"> Level 3 menu 3 </a> <div id = "submenu_2_1_3"> <ul> <li> id = "subMenu_A_2_1_3_1"> Menu de niveau 4 1 </a> </li> <li> <a href = "#" id = "subMenu_a_2_1_3_2"> Menu de niveau 4 2 </a> </li> <li> <a href = "#" id = "subMan_a_2_1_3_3"> menu de niveau 4 3 </a> </li> </ul> </ div> </li> <li> <a href = "#" id = "submenu_a_2_2"> Menu de deuxième niveau 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_3"> Menu secondaire 3 </a> id = "subMenu_A_2_4"> menu de deuxième niveau 4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5"> Menu de deuxième niveau 5 </a> </li> </ul> </li> <li> <a href = "#" id = "Treemenu_a_3"> id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1"> Menu de deuxième niveau 1 </a> </li> <li> <a href = "#" id = "submenu_a_3_2"> Menu de deuxième niveau 2 </a> </li> <li> <a href = "#" id = "subMenu_A_3_3"> Menu de deuxième niveau 3 </a> </li> <li> <a href = "#" id = "submenu_a_3_4"> menu de deuxième niveau 4 </a> </li> <li> <a href = "#" id = "subMenu_A_3_5"> Second-Level Menu 5 </a> </li> </ul> </div> </li> </ul> </div>
Lire la classe d'outils Cookie:
// Cookie Tool class var cookietool = {// read 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; 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 "";}, // set cookatesetcookie: function (c_name, value, expired) {var exd) Date (); exDate.SetDate (exDate.getDate () + Expireds); // définir la date de document.cookie = c_name + "=" + Escape (valeur) + ((expiredays == null)? "": "; Expires =" + exDate.togmTString ());}, // delete cookiedelcookie: function (c_name) {var exDate = New Date (); exdate.setDate (exDate.GetDate () - 1);); // Document de date d'hier.cookie = c_name + "=; exires =" + exDate.togmTString ();}};Menu l'événement reliant:
// l'événement de menu liant $ ('. Trememenu a'). Bind ('click', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('. Submenu'); if ($ submenu.length> 0) {// est là un sous-mine de var = $ (this) .next ('. 0? Cookietool.getcookie (id); $ ('. Treemenu'). find ('. on'). reroveclass ('on'). addClass ('off'); $ ('#' + curid) .addclass ('on'); $ ('. Treemenu a [class = "off"]'). chaque (fonction (fonction () {{ Cookietool.Delcookie ($ (this) .attr ('id'));Réinitialiser le menu lorsque la page se charge
// la page charge des cookies $ ('. Treemenu a'). Chaque (fonction () {showmenu ($ (this) .attr ('id'));}); // la fonction de lecture du menu d'affichage showmenu (id) {var $ this = $ ('#' + id); var cookie = cookietool.getcookie (id); if (cookie) {if ($ this.next ('. SubMenu'). Longueur> 0) {$ this.next ('. SubMenu'). CSS ('Display', cookie);} else {$ ('#' + cookie) .addClass ('on');}}}}Démo complet:
【JavaScript】 Rafraîchir le menu des arbres inchangés (menu à plusieurs niveaux) .zip
Remarque: la console chromée locale ne peut pas lire les cookies et il doit être testé dans un environnement Firefox / IE ou Server