溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
具體代碼如下：
<!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的瀏覽器來(lái)說(shuō)會(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)行展開(kāi)收縮的操作
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>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼