js学习总结----案例之多级菜单js版本
生活随笔
收集整理的這篇文章主要介紹了
js学习总结----案例之多级菜单js版本
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
具體代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;font-size:14px;}ul,li{list-style:none;}.box{margin:10px;padding:10px;width:300px;border:1px dashed #008000;/*漸進(jìn)增強(qiáng):首先設(shè)置一個(gè)純色的背景，對(duì)于不兼容css3的瀏覽器來說會(huì)使用純色，對(duì)于兼容的瀏覽器，我們?cè)谙旅嬖陬~外的增加一些漸變色，這樣會(huì)覆蓋掉上面*/background:#ffe470;background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);}.box li{position:relative;line-height:30px;}.box em{position:absolute;top:7px;left:0;width:16px;height:16px;background:url("img/icon.png") no-repeat -59px -28px;cursor:pointer;}.box span{display:block;padding-left:20px;}.box em.open{background-position:-42px -28px;}.box .two{margin-left:20px;}.box .three{margin-left:40px;}.box .four{margin-left:60px;}.box .two,.box .three,.box .four{display:none;}</style> </head> <body><div class='box' id='box'><ul><li><em></em><span>第一級(jí)第一個(gè)</span><ul class='two'><li><span>第二級(jí)第一個(gè)</span></li><li><em></em><span>第二級(jí)第二個(gè)</span><ul class='three'><li><span>第三極第一個(gè)</span></li><li><span>第三極第二個(gè)</span></li><li><em></em><span>第三極第三個(gè)</span><ul class='four'><li><span>第四級(jí)第一個(gè)</span></li><li><span>第四級(jí)第二個(gè)</span></li><li><span>第四級(jí)第三個(gè)</span></li></ul></li></ul></li><li><em></em><span>第二級(jí)第三個(gè)</span><ul class='three'><li><span>第三級(jí)第一個(gè)</span></li><li><span>第三級(jí)第二個(gè)</span></li><li><span>第三級(jí)第三個(gè)</span></li></ul></li></ul></li></ul><ul><li><em></em><span>第一級(jí)第一個(gè)</span><ul class='two'><li><span>第二級(jí)第一個(gè)</span></li><li><em></em><span>第二級(jí)第二個(gè)</span><ul class='three'><li><span>第三極第一個(gè)</span></li><li><span>第三極第二個(gè)</span></li><li><em></em><span>第三極第三個(gè)</span><ul class='four'><li><span>第四級(jí)第一個(gè)</span></li><li><span>第四級(jí)第二個(gè)</span></li><li><span>第四級(jí)第三個(gè)</span></li></ul></li></ul></li><li><em></em><span>第二級(jí)第三個(gè)</span><ul class='three'><li><span>第三級(jí)第一個(gè)</span></li><li><span>第三級(jí)第二個(gè)</span></li><li><span>第三級(jí)第三個(gè)</span></li></ul></li></ul></li></ul></div><script>var box = document.getElementById('box');//把列表中的span(前面有em的span)設(shè)置一個(gè) cursor:pointer的樣式var spanList = box.getElementsByTagName("span");for(var i = 0;i<spanList.length;i++){var curSpan = spanList[i];var curPre = utils.prev(curSpan);if(curPre && curPre.tagName.toLowerCase()==="em"){curSpan.style.cursor = "pointer"}}//使用事件委托實(shí)現(xiàn)我們的操作box.onclick = function(e){e = e || window.event;var tar = e.target || e.srcElement;//只有點(diǎn)擊的是em或者span標(biāo)簽，我們才進(jìn)行展開收縮的操作if(/^(em|span)$/i.test(tar.tagName)){var parent = tar.parentNode;//獲取父親var firstUl = utils.children(parent,"ul")[0]//獲取父親子集中的第一個(gè)ul標(biāo)簽var oEm = utils.children(parent,"em")[0]if(firstUl){//如果隱藏讓顯示，否則讓隱藏var isBlock = utils.getCss(firstUl,"display") === "block" ? true : false;if(isBlock){firstUl.style.display = "none";if(oEm){utils.removeClass(oEm,"open")}//當(dāng)外層的收起，里層所有的ul都要隱藏，所有的em都要移除open樣式var allUl = parent.getElementsByTagName("ul"),allEm = parent.getElementsByTagName("em");for(var i = 0;i<allUl.length;i++){allUl[i].style.display = "none";utils.removeClass(allEm[i],"open");}}else{firstUl.style.display = "block";if(oEm){utils.addClass(oEm,"open")}}}}}</script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/diasa-fly/p/7230009.html
總結(jié)
以上是生活随笔為你收集整理的js学习总结----案例之多级菜单js版本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用原生javascript制作日历
- 下一篇： Android 最新左右可见上下页的ba