Установите cookie, чтобы сохранить статус меню Tree, и перечитайте печенье, когда страница загружается.
HTML -структура меню:
<div> <ul> <li> <a href = "#" "id =" treemenu_a_1 "> меню первого уровня 1 </a> <div id =" sumenu_1 "> <ul> <li> <a href =" subpage/a.html "id =" sumenu_a_1_1_1> Второе меню 1 </a> <li> <li> <li> <A> href = "subpage/b.html" id = "submenu_a_1_2"> меню второго уровня 2 </a> </li> <li> <a href = "#" id = "sumenu_a_1_3"> меню второго уровня 3 </a> </li> <li> <a href = "#" Id = "SubmenU_A_1_1_1_1 4 </a> </li> <li> <a href = "#" ID = "sumenu_a_1_5"> меню второго уровня 5 </a> </li> </ul> </div> <li> <a href = "#" id = "treemenu_a_2"> Menu 2 </a> </ Div Id = "formen href = "#" id = "submenu_a_2_1"> меню второго уровня 1 </a> </li> <li> <a href = "#" id = "sumenu_a_2_1_1"> Меню второго уровня 1 </a> </li> <li> <a href = "#" id = "sumper_a_2_1_1_1_1_1_1_1 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_2"> меню второго уровня 2 </a> </li> <li> <a href = "#" id = "sumnu_a_2_3"> Уровень 3 Menu 3 </a> <div = "Sumper_2_1_3" href = "#" id = "submenu_a_2_1_3_1"> меню уровня 4 </a> </li> <li> <a href = "#" "id =" sumenu_a_2_1_3_2 "> Menu 4 </a> </li> <li> <a href ="#"" ID = "formenu_3_3_1_3_1_3_1_3_1_1_1_1_1_1_1 3 </a> </li> </ul> </div> </li> <li> <a href = "#" id = "submenu_a_2_2"> Меню второго уровня 2 </a> </li> <li> <a href = "#" ID = "Submenu_a_3_3"> Menu Second-Level 3 </a> </li> <hre> <ahre> <ahre> <hre> <hre> <ahre> <hre> id = "sumenu_a_2_4"> меню второго уровня 4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5"> меню второго уровня 5 </a> </li> </ul> </li> <li> <a href = "#" dipemu id = "sumenu_3"> <ul> <li> <a href = "#" "id =" sumenu_a_3_1 "> меню второго уровня 1 </a> </li> <li> <a href ="#"id =" sumenu_a_3_2 "> Menu второго уровня 2 </a> </li> id = "sumenu_a_3_3"> меню второго уровня 3 </a> </li> <li> <a href = "#" "id =" submenu_a_3_4 "> меню второго уровня 4 </a> </li> <li> <a href ="#"yd =" submenu_a_3_5 " 5 </a> </li> </ul> </div> </li> </ul> </div>
Читать класс инструментов cookie:
// Класс инструмента cookie var cookietool = {// Читать cookiegetCookie: function (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 unescape (document.cookie.substring (c_start, c_end);}} return "";}, // cookiestcooki Date (); exdate.setDate (exdate.getDate () + истечь); // Установить дату document.cookie = c_name + "=" + rescep (value) + ((истечь == null)? "": "; Истекает =" + exdate.togmtString ());}, // удалить приготовление cookiedeLcookie: function (c_name) {var exdate = new Date (); exdate.setDate (eSdate (eSdate) // вчерашняя дата документ.coukie = c_name + "=; истекает =" + exdate.togmtString ();}};Соблюдение событий меню:
// Связывание событий меню $ ('. TreeMenu a'). Bind ('click', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('. Sumpanu'); if ($ submenu.length> 0) {// существует подменг. $ (this) .next ('. Saper: Hidden'). Длина> 0? cookietool.getcookie (id); $ ('.. treemenu'). Найти ('. On'). removeClass ('on'). addClass ('off'); $ ('#' + curid) .adclass ('on'); $ ('. cookietool.delcookie ($ (this) .attr ('id'));Меню сброса при загрузке страницы
// Страница загружает чтение cookie $ ('.. TreeMenu a'). Каждый (function () {showmenu ($ (this) .Attr ('id'));}); // функция меню для чтения cookie showmenu (id) {var $ this = $ ('#' + id); var cookie = cookietool.getcookie (id); ($ this.next ('. Sumenu'). Length> 0) {$ this.next ('. Saper'). CSS ('Display', cookie);} else {$ ('#' + cookie) .AdDClass ('on');}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}Полная демонстрация:
【Javascript】 Меню «Обновить неизменное дерево» (многоуровневое меню) .zip
Примечание: локальная хромированная консоль не может читать файлы cookie, и ее необходимо протестировать в Firefox/IE или серверной среде