JS through cookies to achieve refreshing unchanged tree menu _javascript Tips

Set the menu by setting a cookie to save the state of the tree menu, and then re-read the cookie when the page loads.

HTML structure of the menu:

<div class= "Treemenu" > <ul> <li> <a href= "#" id= "treemenu_a_1" > One-level cuisine single </a> <div class= " Submenu "id=" Submenu_1 "> <ul> <li><a href=" subpage/a.html "id=" Submenu_a_1_1 "> Two-level vegetables single </a> </li> <li><a href= "subpage/b.html" id= "submenu_a_1_2" > Level two menu two </a></li> <li><a href= "#" id= "Submenu_a_1_3" > Level two menu three </a></li> <li><a href= "#" id= "Submenu_a_1_4" > Level two Menu four < /a></li> <li><a href= "#" id= "Submenu_a_1_5" > Level two menu five </a></li> </ul> </div > </li> <li> <a href= "#" id= "treemenu_a_2" > Level menu two </a> <div class= "submenu" id= "Submenu_2" > <ul> <li> <a href= "#" id= "Submenu_a_2_1" > Two level menu single </a> <div class= "submenu" id= "Submenu_2_" 1 "> <ul> <li><a href=" # "id=" submenu_a_2_1_1 "> Three vegetables Single </a></li> <li><a href=" # "id=" Submenu_a_2_1_2 > Level three menu two </a></li> <li> <a HREf= "#" id= "Submenu_a_2_1_3" > Level three menu three </a> <div class= "submenu" id= "Submenu_2_1_3" > <ul> <li> <a href= "#" id= "Submenu_a_2_1_3_1" > Level four single </a></li> <li><a href= "#" id= "Submenu_a_2_1_3_2" > Level Four Menu two </a></li> <li><a href= "#" id= "Submenu_a_2_1_3_3" > Four level menu three </a></li> </ ul> </div> </li> </ul> </div> </li> <li><a href= "#" id= "Submenu_a_2_2" > Level two menu two </a></li> <li><a href= "#" id= "Submenu_a_2_3" > Level two menu three </a></li> <li> <a href= "#" id= "Submenu_a_2_4" > Level two menu four </a></li> <li><a href= "#" id= "Submenu_a_2_5" > Secondary menu Five </a></li> </ul> </div> </li> <li> <a href= "#" id= "Treemenu_a_3" > First-level menu three </a> <div class= "submenu" id= "Submenu_3" > <ul> <li><a href= "#" id= "Submenu_a_3_1" > two grade Vegetable single </a></li> <li><a href= "#" id= "Submenu_a_3_2" > Level two Menu two &LT;/A&GT;&LT;/li> <li><a href= "#" id= "Submenu_a_3_3" > Level two menu three </a></li> <li><a href= "#" id= " Submenu_a_3_4 "> Level two menu four </a></li> <li><a href=" # "id=" Submenu_a_3_5 "> Two level menu five </a></ li> </ul> </div> </li> </ul> </div>

Read Cookie Tool class:

Cookie Tool class
var cookietool = {
//Read 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 "";
},
//Set cookie
setcookie:function (c_name, value, expiredays) {
var exdate = new Date (); C20/>exdate.setdate (exdate.getdate () + expiredays); Set Date
Document.cookie = c_name + "=" + Escape (value) + ((expiredays = null)? ' ":"; expires= "+ exdate.togmtstring ());
},
//delete cookie
delcookie:function (c_name) {
var exdate = New Date ();
Exdate.setdate (Exdate.getdate ()-1); Yesterday date
Document.cookie = C_name + "=;expires=" + exdate.togmtstring ();
}
;

Menu Event Bindings:

Menu Event Binding
$ ('. Treemenu a '). bind (' click ', Function () {
var $this = $ (this);
var id = $this. attr (' id ');
var $submenu = $this. Next ('. submenu ');
if ($submenu. length > 0) {//whether there is a submenu
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, ten);
} else {
Cookietool.setcookie (ID, ID, ten);
var Curid = Cookietool.getcookie (ID);
$ ('. Treemenu '). Find ('. on '). Removeclass (' in '). addclass (' off ');
$ (' # ' + curid). addclass (' on ');
$ ('. Treemenu a[class= ' off] '). each (function () { 
Cookietool.delcookie ($ (this). attr (' id '));//delete other selected option cookie
});
}
});

Reset menu when page loads

Page load Read cookies
$ ('. Treemenu a '). each (function () {
ShowMenu ($ (this). attr (' id '

)); Read cookie Display menu
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 ');}}

Full Demo:

The JavaScript refresh does not change the tree menu (Multilevel menu). zip

Note: The chrome local console cannot read cookies and needs to be tested in firefox/ie or server environments