JavaScript作為前端開發(fā)的重要語言之一，很多網(wǎng)頁都需要實現(xiàn)一些二級目錄的效果，如帶有下拉菜單的導航欄。本文將介紹如何實現(xiàn)JavaScript的二級目錄功能。

實現(xiàn)JavaScript的二級目錄可以利用HTML中的ul和li標簽來構(gòu)建菜單結(jié)構(gòu)，再結(jié)合CSS實現(xiàn)樣式的定制化，最后通過JavaScript實現(xiàn)交互效果。

<ul>
<li><a href="#">一級目錄1</a>
<ul>
<li><a href="#">二級目錄1-1</a></li>
<li><a href="#">二級目錄1-2</a></li>
</ul>
</li>
<li><a href="#">一級目錄2</a>
<ul>
<li><a href="#">二級目錄2-1</a></li>
<li><a href="#">二級目錄2-2</a></li>
</ul>
</li>
</ul>

以上是一個簡單的HTML菜單結(jié)構(gòu)，其中一級目錄作為ul標簽下的li標簽，二級目錄則作為ul標簽的子元素嵌套在li標簽內(nèi)。接下來使用CSS設(shè)置樣式。

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #333;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
z-index: 999;
}
li:hover ul {
display: block;
}

在CSS中，首先將ul和li標簽的默認padding和margin清除，避免出現(xiàn)不必要的間距。然后為li標簽設(shè)置position: relative，使得二級目錄可以相對于一級目錄的位置顯示。li a設(shè)置為block元素，這樣才可以撐開li標簽的大小，同時排除上下文之后使得a標簽可以呈現(xiàn)出完整的背景色。li ul的樣式中利用display: none將二級目錄默認隱藏，然后對一級目錄的:hover狀態(tài)進行樣式切換，在鼠標滑過時設(shè)置li ul為display: block，從而顯示對應(yīng)的二級菜單。

最后是JavaScript的實現(xiàn)，將HTML和CSS鏈接在一起，實現(xiàn)二級目錄下拉菜單的交互效果。

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
var ul = li.querySelector('ul');
if (ul != null) {
li.addEventListener('mouseenter', function() {
this.classList.add('hover');
});
li.addEventListener('mouseleave', function() {
this.classList.remove('hover');
});
ul.addEventListener('mouseenter', function() {
this.parentNode.classList.add('hover');
});
ul.addEventListener('mouseleave', function() {
this.parentNode.classList.remove('hover');
});
}
}

通過document.querySelectorAll('li')和li.querySelector('ul')獲取到ul和li標簽，然后利用addEventListener函數(shù)來監(jiān)聽鼠標進入和離開事件，從而實現(xiàn)hover狀態(tài)的轉(zhuǎn)換。需要注意的是，在mouseleave事件中，要將hover狀態(tài)從ul的parentNode即li標簽上刪除，否則鼠標在二級菜單內(nèi)滑動時，一級目錄不會停留在hover狀態(tài)，也就無法實現(xiàn)二級目錄的連續(xù)展開。

本文介紹了JavaScript的二級目錄實現(xiàn)方式。通過HTML的ul和li標簽，CSS樣式的定制和JavaScript的交互效果，可以快速實現(xiàn)一個簡單的二級下拉菜單。