JS如何实现二级菜单

JS实现二级菜单

使用JS实现二级菜单，需要先在HTML中定义好菜单结构，使用JS来控制菜单的显示和隐藏。

在HTML中定义一级菜单和二级菜单，一级菜单和二级菜单可以使用

标签定义，如：

    
一级菜单1
        

            
二级菜单1
            
二级菜单2
            
二级菜单3
        
    
    
一级菜单2
        

            
二级菜单4
            
二级菜单5
            
二级菜单6
        
    

使用JS来控制菜单的显示和隐藏，可以使用JS的事件处理函数来实现，如：

// 为一级菜单添加点击事件
document.getElementById('menu1').onclick = function() {
    // 获取二级菜单
    var subMenu = document.getElementById('subMenu1');
    // 判断二级菜单是否显示
    if (subMenu.style.display == 'none') {
        // 如果不显示，则设置为显示
        subMenu.style.display = 'block';
    } else {
        // 如果显示，则设置为隐藏
        subMenu.style.display = 'none';
    }
};

上面的代码是为一级菜单添加点击事件，当点击一级菜单时，就会触发点击事件，就可以控制二级菜单的显示和隐藏。

可以使用CSS来控制菜单的样式，如：

#menu1 {
    background-color: #ccc;
    padding: 5px;
}
#subMenu1 {
    display: none;
    background-color: #eee;
    padding: 5px;
}

上面的代码是为一级菜单和二级菜单设置样式，可以设置背景色、边框、字体等。

通过以上步骤，可以使用JS实现二级菜单，可以让网页更加美观，更加简洁。