Artikel ini menjelaskan efek pengungkapan menu yang diimplementasikan oleh JS berdasarkan konstruktor. Bagikan untuk referensi Anda, sebagai berikut:
Tangkapan layar efek berjalan adalah sebagai berikut:
Kode spesifiknya adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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-type" Content = "; bahasa = "javascript"> fungsi sdmenu (id) {if (! document.geteLementById ||! document.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;} sdmenu.prototype.init = function () {var MainInstance = this; untuk (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"); untuk (var i = 0; i <links.length; i ++) if (tautan [i] .href == document.location.href) {tautan [i] .className = "saat ini"; merusak; }}*/ if (this.remember) {var regex = regexp baru ("sdMenu_" + encodeuricomponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (cocok) {var state = match [1] .split (""); untuk (var i = 0; i <state.length; i ++) this.submenus [i] .className = (states [i] == 0? "Runtuh": ""); }}}; SdMenu.prototype.togglemenu = function (submenu) {if (submenu.classname == "cobrapsed") this.expandmenu (submenu); lain this.collapseMenu (submenu);}; sdmenu.prototype.expandmenu = function (submenu) {var fullheight = submenu.getElementsbyTagname ("span") [0] .offsetheight; var links = submenu.getElementsbyTagname ("a"); untuk (var i = 0; i <links.length; i ++) fullheight+= tautan [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; if (newheight <fullheight) submenu.style.height = newheight + "px"; else {clearInterval (intid); submenu.sty "; MainInstance.Memorize ();}}, 10); //this.collapseothers(submenu); }; SdMenu.prototype.collapseMenu = function (submenu) {var minHeight = submenu.getElementsbyTagname ("span") [0] .offsetHeight; var moveby = math.round (this.speed * submenu.getElementsbyTagname ("a"). panjang); var maininstance = this; var intid = setInterval (function () {var Curheight = submenu.offsetheight; var newheight = Curheight - moveby; if (newheight> minheight) submenu.style.height = newheight + "px"; else {clearInterval (intid); submenu.sty (else = "{else {clearInterval (intid); submenu.sty (subua.sty (else" "; "Runtuh"; ini. }};*/Sdmenu.prototype.memorize = function () {if (this.remember) {var state = array baru (); untuk (var i = 0; i <this.submenus.length; i ++) state.push (this.submenus [i] .className == "runtuh"? 0: 1); var d = tanggal baru (); 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 = new sdmenu ("my_menu"); myMenu.init ();}; </script> <style type = "text/css"> html, body {height: 100%; Margin: 0; font-size: 12px; } span {latar belakang:#f0dfbe; Perbatasan: 1px solid #ffffff; Border-left: 6px solid #f2a31b; Lebar: 228px; Tinggi: 23px; Tampilan: Blok; Line-Height: 23px; Padding-left: 20px; } a {padding: 3px 0 3px 40px; Tampilan: Blok; Warna:#636363; } #my_menu {width: 255px; Latar belakang:#f7f2e4; Tinggi: 100%; } div.sdmenu div.collapsed {height: 25px;} div.sdmenu div {overflow: tersembunyi; } </tyle> </head> <body> <v style = "float: left" id = "my_menu"> <span> <span> menu satu </span> <a href = "#" >> menu subkonten </a> <a href = "#" Subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> </div> <van> menu subkonten </a> </a>#" href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#"> menu subkonten </a> <a href ="#">> menu </a> <a href ="#">> menu </a> <a href ="#">> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#"#"> menu </a> <a href = "#"#"> menu </a> <a href = "#"#"> menu </a> <a href = "#"#"> Subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> <a href = "#" >> menu subkonten </a> href = "#" Tiga </span> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#"> menu tiga sub-konten </a> </a> <a href ="#" href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#"> menu tiga sub-konten </a> <a href = "#" >> menu tiga </a> </a> <a href = "#" Sub-Konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-konten </a> <a href = "#" >> menu tiga sub-content </a> </a> <a href = "#" >> menu tiga sub-content </a> </a> <a href = "#" href = "#" >> menu tiga sub-konten </a> </div> </div> </body> </html>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.