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实现代码简单易懂，但是只适用于一级菜单有下拉菜单的情况。