ตั้งค่าคุกกี้เพื่อบันทึกสถานะของเมนูต้นไม้และอ่านคุกกี้อีกครั้งเมื่อหน้าโหลด
โครงสร้าง 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_1 href = "หน้าย่อย/b.html" id = "submenu_a_1_2"> เมนูระดับที่สอง 2 </a> </li> <li> <a href = "#" id = "submenu_a_1_3"> เมนูระดับที่สอง 3 </a> </li> <li> 4 </a> </li> <li> <a href = "#" id = "submenu_a_1_5"> เมนูระดับที่สอง 5 </a> </li> </ul> </div> <li> <a href = "#" id = "treemenu_a_2" id = "submenu_a_2_1"> เมนูระดับสอง 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_1"> เมนูระดับที่สอง 1 </a> </li> <li> href = "#" id = "submenu_a_2_1_2"> เมนูระดับที่สอง 2 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3"> ระดับ 3 เมนู 3 </a> <div id = "submenu_2_1_3" id = "submenu_a_2_1_3_1"> ระดับ 4 เมนู 1 </a> </li> <li> <a href = "#" id = "submenu_a_2_1_3_2"> เมนูระดับ 4 2 </a> </li> <li> 3 </a> </li></ul> </div> </li> <li> <a href = "#" id = "submenu_a_2_2"> เมนูระดับที่สอง 2 </a> </li> <li> <a href = "#" id = "submenu_a_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> id = "submenu_3"> <ul> <li> <a href = "#" id = "submenu_a_3_1"> เมนูระดับสอง 1 </a> </li> <li> <a href = "#" id = "Submenu_a_3_2" id = "submenu_a_3_3"> เมนูระดับที่สอง 3 </a> </li> <li> <a href = "#" id = "submenu_a_3_4"> เมนูระดับที่สอง 4 </a> </li> <li> 5 </a> </li></ul> </div> </li> </ul> </div>
อ่านคลาสเครื่องมือคุกกี้:
// เครื่องมือคุกกี้คลาส var cookietool = {// อ่าน cookiegetCookie: ฟังก์ชั่น (c_name) {ถ้า (document.cookie.length> 0) {c_start = document.cookie.indexof (c_name + "="); if (c_start! = -1) document.cookie.indexof (";", c_start); ถ้า (c_end == -1) {c_end = document.cookie.length;} return unescape (document.cookie.substring (c_start, c_end)); วันที่ (); exdate.setDate (exdate.getDate () + หมดอายุ); // กำหนดวันที่ document.cookie = c_name + "=" + escape (value) + ((expiredays == null)? "": "; expires =" + exdate.togmtstring ());}, // ลบ cookiedelcookie: ฟังก์ชัน (c_name) // เอกสารวันที่เมื่อวานนี้ cookie = c_name + "=; expires =" + exdate.togmtstring ();}};การเชื่อมโยงเหตุการณ์เมนู:
// เมนูเหตุการณ์ที่มีผลผูกพัน $ ('. treemenu a'). bind ('คลิก', function () {var $ this = $ (this); var id = $ this.attr ('id'); var $ submenu = $ this.next ('submenu') 0? TRUE: FALSE; IF (FLAG) {$ Submenu.Show ();} อื่น {$ submenu.hide ();} var display = Flag? cookietool.getcookie (id); $ ('. treemenu') ค้นหา ('. on'). RemoveClass ('on'). addclass ('ปิด'); $ ('#' + curid) .addclass ('on'); $ ('treemenu a [class = "ปิด" cookietool.delcookie ($ (นี่) .attr ('id'));รีเซ็ตเมนูเมื่อโหลดหน้าเว็บ
// หน้าโหลดคุกกี้อ่าน $ ('. treemenu a') แต่ละ (ฟังก์ชั่น () {showmenu ($ (นี่) .attr ('id'));}); // ฟังก์ชั่นการแสดงคุกกี้การอ่านฟังก์ชั่น Showmenu (id) {var $ this = $ ('#' + id); ($ this.next ('. submenu'). ความยาว> 0) {$ this.next ('. submenu'). css ('display', คุกกี้);} else {$ ('#' + คุกกี้) .addclass ('on');}}}}}}}}การสาธิตที่สมบูรณ์:
【 JavaScript 】รีเฟรชเมนูต้นไม้ที่ไม่เปลี่ยนแปลง (เมนูหลายระดับ) .zip
หมายเหตุ: คอนโซลโครเมี่ยมท้องถิ่นไม่สามารถอ่านคุกกี้ได้และจำเป็นต้องทดสอบในสภาพแวดล้อม Firefox/IE หรือเซิร์ฟเวอร์