Dieser Artikel beschreibt das von JS implementierte Menüglied, das von JS basierend auf dem Konstruktor implementiert wird. Teilen Sie es für Ihre Referenz wie folgt weiter:
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-tequiv = "content-type" content = content = "; Menü </title> <script Language = "JavaScript"> Funktion SDMenu (ID) {if (! document.getElementById ||! Dokument.GetElementsByTagName) return false; this.menu = document.getElementById (id); this.subMenus = this.menu.getElementsByTagName ("div"); this.remember = true; this.speed = 1; this.markcurrent = true; this.onesmonly = false;} für (var i = 0; i <this.subMenus.length; i ++) this.subMenus [i] .GetElementsByTagName ("span") [0] .onclick = function () {mainInstance.togglemenu (this.parentnode); }; /*if (this.markcurrent) {var links = this.menu.getElementsByTagName ("a"); für (var i = 0; i <links.length; i ++) if (links [i] .reif == document.location.href) {links [i] .classname = "current"; brechen; }}*/ if (this.remember) {var regex = new regexp ("sdmenu_" + codouricomponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (match) {var States = match [1] .Split (""); für (var i = 0; i <States.length; i ++) this.subMenus [i] .className = (States [i] == 0? "Zusammenbruch": ""); }}}; sonst this.collapsemenu (submenu);}; sdmenu.prototype.expandmenu = function (submenu) {var fullHeight = submenu.getElementsByTagName ("span") [0] .Offseteight; var links = submenu.getElementsByTagName ("a"); für (var i = 0; i <links.length; i ++) FullHeight+= Links [i] .Offseteight; var moveBy = math.round (this.speed * links.length); var maininstance = this; var intid = setInterval (function () {var curheight = submenu.offseteight; var newHeight = curHeight + MoveBy; if (newHeight <fullHeight) submenu.style.Height = newHeight + "px"; else {Clearinterval (intid); submenu.Style.HEITHEL = "; MainInstance.Memorize (); //this.collapseothers(submenu); }; var moveBy = math.round (this.speed * submenu.getElementsByTagName ("a"). Länge); var maininstance = this; var intid = setInterval (function () {var curheight = submenu.offseteight; var newHeight = curHeight - moveBy; if (newHeight> minheight) submenu.style.height = newHeight + "px"; else {ClearInterval (intid); MainInstance.Memorize (); this.subMenus [i] .className! }};*/Sdmenu.prototype.memorize = function () {if (this.remember) {var States = new Array (); für (var i = 0; i <this.subMenus.length; i ++) States.push (this.subMenus [i] .ClassName == "Collabsed"? 0: 1); var d = neues Datum (); d.settime (D.GetTime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdMenu_" + codericomponent (this.menu.id) + "=" + States.join ("") + "; expires =" + d.togmtstring () + "; path =/"; }}; var myMenu; window.onload = function () {myMenu = new SDMenu ("my_menu"); myMenu.init ();}; </script> <style type = "text/css"> html, Körper {Höhe: 100%; Rand: 0; Schriftgröße: 12px; } span {Hintergrund:#f0dfbe; Grenze: 1PX Solid #ffffff; Border-Links: 6PX Solid #F2A31B; Breite: 228px; Höhe: 23px; Anzeige: Block; Zeilenhöhe: 23px; Padding-Links: 20px; } a {padding: 3px 0 3px 40px; Anzeige: Block; Farbe:#636363; } #my_menu {width: 255px; Hintergrund:#f7f2e4; Höhe: 100%; } div.sdmenu div.collapsed {Höhe: 25px;} div.sdmenu div {Überlauf: versteckt; }</style></head><body> <div style="float:left" id="my_menu"> <div> <span>Menu One</span> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> </div> <div> <span>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href = "#" >> Menüsubkontent </a> <a href = "#" >> Menü -Subkontent </a> <a href = "#" >> Menü subkontent </aa> <a href = "#" >> Menü subkontent </a> <a href = "#" >> Menü Subkontent -Menü Subkontent </a> <a href = "#" >> Menü subkontent. subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> href="#">>Menu Three Sub-Content</a> </div> <div> <span>Menu Three</span> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> </div> <div> <span>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Subkontent </a> <a href = "#" >> Menü Drei Sub-Content </a> <a href = "#" >> Menü drei Subcontent </a> <a href = "#" >> Menü Drei Subkontent </a> <a href = "#" >> Menü drei Subcontent </a> </a </a </a < href = "#" >> Menü drei Sub-Content </a> </div> </div> </body> </html>Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.