บทความนี้อธิบายถึงผลการเลื่อนเมนูการเปิดเผยผลที่ใช้โดย JS ตามตัวสร้าง แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ภาพหน้าจอของเอฟเฟกต์การทำงานมีดังนี้:
รหัสเฉพาะมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-equiv = "content-tyepe เมนู </title> <script language = "javascript"> ฟังก์ชั่น sdmenu (id) {if (! document.getElementById ||! document.getElementByTagname) ส่งคืน false; this.menu = document.getElementById (id); this.submenus = this.menu.getElementsByTagname ("div"); this.remember = true; this.speed = 1; this.markcurrent = true; this.onesmonly = false;} sdmenu.prototype.init = function () {var maininstance = this; สำหรับ (var i = 0; i <this.submenus.length; i ++) this.submenus [i] .getElementsByTagname ("span") [0] .onclick = function () {maininstance.togGlemenu (this.parentNode); - /*ถ้า (this.markCurrent) {var links = this.menu.getElementByTagname ("A"); สำหรับ (var i = 0; i <links.length; i ++) ถ้า (ลิงก์ [i] .href == document.location.href) {ลิงก์ [i] .className = "ปัจจุบัน"; หยุดพัก; }}*/ if (this.remember) {var regex = ใหม่ regexp ("sdmenu_" + encodeuricomponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (จับคู่) {var state = match [1] .split (""); สำหรับ (var i = 0; i <state.length; i ++) this.submenus [i] .className = (สถานะ [i] == 0? "ยุบ": ""); }}}; sdmenu.prototype.togGlemenu = function (submenu) {ถ้า (submenu.classname == "ยุบ") this.expandmenu (submenu); อย่างอื่น this.collapsemenu (submenu);}; sdmenu.prototype.expandmenu = function (submenu) {var fullheight = submenu.getElementsByTagname ("span") [0] .offSetheight; var links = submenu.getElementsByTagname ("A"); สำหรับ (var i = 0; i <links.length; i ++) fullHeight+= ลิงก์ [i] .offSetheight; var moveby = math.round (this.speed * links.length); var maininstance = this; var intid = setInterval (function () {var curheight = submenu.offSetheight; var newHeight = curheight + MoveBy; ถ้า (newheight <fullheight) Submenu.style.height = newheight + "px"; Maininstance.Memorize ();}}, 10); //this.collapseother(Submenu); }; sdmenu.prototype.collapsemenu = function (submenu) {var minheight = submenu.getElementsByTagname ("span") [0] .offSetheight; var moveby = math.round (this.speed * submenu.getElementsByTagname ("a"). ความยาว); var maininstance = this; var intid = setInterval (function () {var curheight = submenu.offSetheight; var newheight = curheight - Moveby; ถ้า (newheight> minheight) submenu.style.height = newheight + "px"; "ยุบตัว"; Maininstance.Memorize (); this.submenus [i] .classname! = "ยุบ") this.collapsemenu (this.submenus [i]); }};*/sdmenu.prototype.memorize = function () {ถ้า (this.remember) {var state = new Array (); สำหรับ (var i = 0; i <this.submenus.length; i ++) state.push (this.submenus [i] .classname == "ยุบ"? 0: 1); var d = วันที่ใหม่ (); D.Settime (d.getTime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + encodeuricomponent (this.menu.id) + "=" + state.join ("") + "; expires =" + d.togmtstring () + "; path =/"; }}; var mymenu; window.onload = function () {mymenu = sdmenu ใหม่ ("my_menu"); mymenu.init ();}; </script> <style type = "text/css"> html, body {ความสูง: 100%; มาร์จิ้น: 0; ขนาดตัวอักษร: 12px; } span {background:#f0dfbe; ชายแดน: 1px Solid #FFFFFF; ชายแดนซ้าย: 6px Solid #F2A31B; ความกว้าง: 228px; ความสูง: 23px; แสดง: บล็อก; ความสูงบรรทัด: 23px; Padding-Left: 20px; } a {padding: 3px 0 3px 40px; แสดง: บล็อก; สี:#636363; } #MY_MENU {WIDTH: 255PX; ความเป็นมา:#F7F2E4; ความสูง: 100%; } div.sdmenu div.collapsed {ความสูง: 25px;} div.sdmenu div {overflow: ซ่อน; } </style> </head> <body> <div style = "float: left" id = "my_menu"> <div> <pan> เมนูหนึ่ง </span> <a href = "#" >> เมนูย่อย </a> <a href = "#" >> subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนูย่อย </a> </div> <div> <pan> href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#"#" subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนู subcontent </a> <a href = "#" >> เมนูเมนู </a> <a href = "#" >> เมนู สาม </span> <a href = "#" >> เมนูสามเนื้อหาย่อย </a> <a href = "#" >> เมนูสามเนื้อหาย่อย </a> <a href = "#" >> เมนูสามส่วนย่อย </a> <a href = "#" >> เมนู HREF = "#" >> เมนูสามส่วนย่อย </a> <a href = "#" >> เมนูสามส่วนย่อย </a> <a href = "#" >> เมนูสามคอนทุ่งเพศใต้ sub-content </a> <a href = "#" >> เมนูสามเนื้อหาย่อย </a> <a href = "#" >> เมนูสามเนื้อหาย่อย </a> <a href = "#" >> เมนูสามส่วนย่อย </a> <a href = "#" >> เมนูสามเมนู href = "#" >> เมนูสามส่วนย่อย </a> </div> </div> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน