实现左侧菜单二级下拉菜单，
生活随笔
收集整理的這篇文章主要介紹了
实现左侧菜单二级下拉菜单，
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js 實現左側菜單二級下拉菜單，
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>JS實現下拉菜單</title><style type="text/css">* {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;}dd:hover {background: red;}</style></head><body><div id="div1"><ul id="menu"><li class="active">菜單1</li><dl><dd>菜單1.1</dd><dd>菜單1.2</dd><dd>菜單1.3</dd><dd>菜單1.4</dd></dl><li class="active">菜單2</li><dl><dd>菜單2.1</dd><dd>菜單2.2</dd><dd>菜單2.3</dd><dd>菜單2.4</dd></dl><li class="active" onclick="on(idt)">菜單3</li><dl id="idt"><dd>菜單3.1</dd><dd>菜單3.2</dd><dd>菜單3.3</dd><dd>菜單3.4</dd></dl></ul></div></body><script type="text/javascript">var odiv1 = document.getElementById("div1");var oli = odiv1.getElementsByTagName("li");var odl = odiv1.getElementsByTagName("dl");for(var i = 0; i < oli.length; i++) {oli[i].tag = trueoli[i].index = i;oli[i].onclick = function() {// 隱藏子菜單for(var j = 0; j < oli.length; j++) {//判斷當前點擊的下標是否等于隱藏子菜單下標if(this.index != j) {//不等于tag = trueoli[j].tag = true}oli[j].className = '';odl[j].style.display = 'none';}this.className = "active";//判斷當前點擊tag是否trueif(this.tag) {odl[this.index].style.display = "block";this.tag = !this.tag;} else {odl[this.index].style.display = "none";this.tag = !this.tag;}}}</script></html>總結
以上是生活随笔為你收集整理的实现左侧菜单二级下拉菜单，的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java通过freemarker导出包含
- 下一篇： 您认为做好测试计划工作的关键是什么？