用javascript實現簡單的下拉折疊菜單

Gary_js實現簡單的下拉折疊菜單

*{margin:0px; padding:0px;}

#div1 {width:200px; margin:0 auto; line-height:25px;}

ul {list-style:none;}

li {background:#ccc;margin-bottom:3px;}

dl {background:#eee; display:none;}

.active {background:#F90;}

//此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的

• 菜單1

菜單1.1

菜單1.2

菜單1.3

菜單1.4

菜單2

菜單2.1

菜單2.2

菜單2.3

菜單2.4

菜單3

菜單3.1

菜單3.2

菜單3.3

菜單3.4

效果一

點擊一級菜單時彈出二級子菜單，不需要對菜單進行 display==“none”?true:false (缺點：無法把三個一級菜單狀態都設置為"display")

window.onload =function () {var lis = document.getElementsByTagName(‘li‘);var dls = document.getElementsByTagName(‘dl‘);for (var i = 0; i < lis.length; i ++) {

lis[i].index=i;

lis[i].οnclick=function () {for (var i = 0; i < lis.length; i ++) {

lis[i].className=‘‘;

dls[i].style.display= ‘none‘;

}this.className = ‘active‘;

dls[this.index].style.display = ‘block‘;

}

}

}

Gary.Script

效果二

點擊一級菜單彈時進行display==“none”?true:false 使二級菜單實現點擊收縮功能

//此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的

window.onload =function () {var lis = document.getElementsByTagName(‘li‘);var dls = document.getElementsByTagName(‘dl‘);for (var i = 0; i < lis.length; i ++) {

lis[i].index=i;

lis[i].οnclick=function () {for (var i = 0; i < lis.length; i ++) {

lis[i].className=‘‘;

}this.className = ‘active‘;if(dls[this.index].style.display == ‘block‘)

dls[this.index].style.display = ‘none‘

elsedls[this.index].style.display = ‘block‘}

}

}

Gary.Script

效果三

實現二級子菜單動畫展開動畫

Gary_js實現簡單的下拉折疊菜單

//此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的

window.οnlοad= function() {varlis=document.getElementsByTagName(‘li‘);vardls=document.getElementsByTagName(‘dl‘);for(vari= 0; i

lis[i].index=i;

lis[i].οnclick= function() {for(vari= 0; i

lis[i].className=‘‘;

}this.className= ‘active‘;if(dls[this.index].style.display== ‘block‘)

dls[this.index].style.display= ‘none‘

elsedls[this.index].style.display= ‘block‘}

}

}

菜單1

菜單1.1菜單1.2菜單1.3菜單1.4菜單2

菜單2.1

菜單2.2

菜單2.3

菜單2.4

菜單3

菜單3.1

菜單3.2

菜單3.3

菜單3.4

總結

以上是生活随笔為你收集整理的html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。