JavaScript下拉UL菜單是Web頁(yè)面上最普遍的類型之一。它通常用于導(dǎo)航菜單、選項(xiàng)卡、選項(xiàng)欄等。這樣的菜單具有以下特點(diǎn)：第一次加載時(shí)，菜單列表是隱藏的。當(dāng)用戶懸停或單擊菜單觸發(fā)器時(shí)，菜單將展開(kāi)或下拉。讓我們看看如何使用JavaScript創(chuàng)建下拉菜單。

首先，我們需要通過(guò)CSS將UL元素設(shè)置為隱藏。接下來(lái)，我們可以使用JavaScript監(jiān)聽(tīng)觸發(fā)器上的鼠標(biāo)事件，并創(chuàng)建一個(gè)新的樣式類，用于顯示隱藏的UL元素。這個(gè)樣式類的CSS背景顏色、大小、位置等屬性可以通過(guò)CSS設(shè)置。

//CSS
ul.dropdown-menu {
display: none;
}
//JavaScript
var dropdownList = document.getElementById('dropdownList');
var dropdownMenu = document.getElementById('dropdownMenu');
dropdownList.addEventListener('mouseover', function() {
dropdownMenu.classList.add('displayMenu');
});
dropdownList.addEventListener('mouseout', function() {
dropdownMenu.classList.remove('displayMenu');
});

通過(guò)添加displayMenu樣式類，我們可以在鼠標(biāo)懸停事件中顯示UL元素。但是，當(dāng)用戶單擊觸發(fā)器時(shí)，菜單應(yīng)該保持展開(kāi)狀態(tài)。為此，我們需要使用一個(gè)布爾變量來(lái)跟蹤菜單狀態(tài)，以便在單擊事件中切換菜單的顯示和隱藏。

//CSS
ul.dropdown-menu {
display: none;
}
//JavaScript
var dropdownList = document.getElementById('dropdownList');
var dropdownMenu = document.getElementById('dropdownMenu');
var isOpen = false; // default menu is closed
dropdownList.addEventListener('click', function() {
if(isOpen) {
dropdownMenu.classList.remove('displayMenu');
isOpen = false;
} else {
dropdownMenu.classList.add('displayMenu');
isOpen = true;
}
});

以上是最基本的下拉UL菜單的實(shí)現(xiàn)。我們還可以擴(kuò)展這個(gè)菜單，例如添加動(dòng)畫(huà)效果或響應(yīng)移動(dòng)端。不管你選擇添加哪些功能，使用JavaScript創(chuàng)建下拉UL菜單只需要幾行代碼，并且提供了一個(gè)非常靈活的工具，可以輕松創(chuàng)建定制化的導(dǎo)航。