ツリーメニューのステータスを保存するようにCookieを設定し、ページが読み込まれたときにCookieを読み直します。
メニューのHTML構造:
<div> <ul> <li> <a href = "#" id = "treemenu_a_1">ファーストレベルメニュー1 </a> <div id = "submenu_1"> <ul> <li> <a href = "subpage/a.html" id = "submenu_a_1_1" href = "subpage/b.html" id = "submenu_a_1_2">セカンドレベルのメニュー2 </a> </li> <li> <a href = "#" id = "submenu_a_1_3">セカンドレベルメニュー3 < 4 </a> </li> <li> <a href = "#" id = "submenu_a_1_5">セカンドレベルのメニュー5 </a> </li> </ul> </ul> </div> <li> <a href = "#"# "#" id = "treemenu_a_2">ファーストレベルメニュー2 href = "#" id = "submenu_a_2_1">セカンドレベルメニュー1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_1">セカンドレベルメニュー1 </a> </a> </li> <li> <a href = " 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_2">セカンドレベルのメニュー2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3">レベル3メニュー3 </a> href = "#" id = "submenu_a_2_1_3_1">レベル4メニュー1 </a> </a> </li> <li> <a href = "#" "#" "id =" submenu_a_2_1_3_2 ">レベル4メニュー2 </a> </li> <li> <a href =" 3 </a> </li> </ul> </div> </li> <li> <a href = "#" id = "submenu_a_2_2">セカンドレベルメニュー2 </a> </li> <li> <a href = "#" id = "submenu_a_2_3" id = "submenu_a_2_4">セカンドレベルのメニュー4 </a> </li> <li> <a href = "#" id = "submenu_a_2_5">セカンドレベルメニュー5 </a> </li> </ul> </li> <li> <a href = "#" id = "treemenu_a_3" second-level " id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1">セカンドレベルメニュー1 </a> </li> <li> <a href = "#" id = "submenu_a_3_2">セカンドレベルメニュー2 </a> </li> < id = "submenu_a_3_3">セカンドレベルのメニュー3 </a> </li> <li> <a href = "#" submenu_a_3_4 ">セカンドレベルメニュー4 </a> </li> <li> <a href ="# "#" id = "submenu_a_3_5"> second-level Menu 5 </a> </li> </ul> </div> </li> </ul> </div>
クッキーツールクラスを読む:
// Cookie Tool class var cookietool = {// 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. document.cookie.indexof( ";"、c_start); if(c_end == -1){c_end = document.cookie.length;} return unescape(document.cookie.substring(c_start、c_end));}} return "";} date(); exdate.setdate(exdate.getDate() + expireds); // document.cookie = c_name + "=" + escape(value) +((expedays == null)? "": "; expires =" + exdate.togmtstring();}、// cookiedelcookie:function(c_name){var exdate = new date(); exdate( //昨日の日付document.cookie = c_name + "=; expires =" + exdate.togmtstring();}};メニューイベントバインディング:
//メニューイベントバインディング$('。treemenua ')。bind(' click '、function(){var $ this = $(this); var id = $ this.attr(' id '); var $ submenu = $ this.next('。submenu'); if($ submenu.length> 0){// $(this).next( '。submenu:hidden')。 cookietool.getcookie(id); $( '。treemenu')。find( '。on')。 cookietool.delcookie($(this).attr( 'id'));ページが読み込まれたときにメニューをリセットします
//ページの読み取りcookies $('。treemenua ') ($ this.next('。submenu ')。length> 0){$ this.next('。submenu')。css( 'display'、cookie);} else {$( '#' + cookie).addclass( 'on');}}}}}}完全なデモ:
【javascript】unchangedツリーメニュー(マルチレベルメニュー).zipを更新します
注:ローカルクロムコンソールはCookieを読み取ることができず、Firefox/IEまたはサーバー環境でテストする必要があります