Javascript二級菜單

Javascript二級菜單指的是一個網頁上的二級菜單欄，當鼠標放在一級菜單上時，會彈出下拉菜單，用于顯示下一級菜單。下面讓我們來看一下這類菜單常用的實現方法。

普通CSS實現

.nav1 ul{
display: none;
}
.nav1:hover ul{
display: block;
}

這是一段簡單的CSS代碼。當鼠標滑過.nav1元素時，元素的下一個兄弟元素（通常是ul）的display屬性改為block，從而實現下拉菜單的顯示。這個方法簡單易懂，但是僅限于一級菜單欄有下拉菜單的情況。

jQuery實現

$(function () {
$('ul.nav li.dropdown').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});

此代碼是使用jQuery實現二級菜單的常用代碼。它是在鼠標懸停在一級菜單上的時候，利用jQuery的動畫效果，將二級菜單漸變地顯示出來，當鼠標移開時，同樣使用動畫效果緩慢消失。這個方法可以實現比較流暢的菜單效果，但是需要先引入jQuery庫。

純Javascript實現

function showMenu(elem) {
var submenu = elem.getElementsByTagName('ul')[0];
submenu.style.display = 'block';
}
function hideMenu(elem) {
var submenu = elem.getElementsByTagName('ul')[0];
submenu.style.display = 'none';
}

這個代碼是最基礎的Javascript二級菜單代碼。它利用了Javascript的getElementByTagName()方法來獲取元素下的ul子元素，并利用Javascript的DOM操作style方法來改變該元素的display屬性。當鼠標移開時，同樣使用style方法控制display為none，從而實現消失效果。

總結

以上三個方法都是常見的Javascript二級菜單實現方法，每個方法都有各自的特點，根據實際需求選擇最適合的實現方式。其中jQuery方法的效果最流暢，但是需要使用jQuery庫。純Javascript實現代碼簡單，執行速度快，但是缺乏動畫效果。普通CSS實現代碼簡單易懂，但是只適用于一級菜單有下拉菜單的情況。