js原生二级菜单

在JavaScript中实现原生二级菜单通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例，展示如何创建一个基本的二级菜单。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="menu">
        <li><a href="#">菜单1</a>
            <ul class="submenu">
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li><a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.menu {
    list-style-type: none;
    padding: 0;
}

.menu > li {
    display: inline-block;
    position: relative;
}

.menu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 0;
    min-width: 150px;
}

.submenu li {
    display: block;
}

.submenu a:hover {
    background-color: #f0f0f0;
}

JavaScript交互

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu > li');

    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'block';
            }
        });

        item.addEventListener('mouseleave', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });
    });
});

解释

HTML结构：创建一个包含主菜单和子菜单的列表结构。
CSS样式：设置菜单的基本样式，并使用.submenu类来控制子菜单的显示和隐藏。
JavaScript交互：添加事件监听器，当鼠标悬停在主菜单项上时显示子菜单，当鼠标离开时隐藏子菜单。

应用场景

网站导航：在网站的顶部或侧边栏中使用二级菜单来组织内容。
应用界面：在桌面或移动应用中使用二级菜单来提供额外的功能选项。

可能遇到的问题及解决方法

子菜单不显示：确保CSS中的.submenu类设置了display: none;，并且在JavaScript中正确地切换了display属性。
子菜单定位问题：确保子菜单的position属性设置为absolute，并且父元素具有position: relative;。
兼容性问题：测试在不同浏览器中的显示效果，确保CSS和JavaScript在所有目标浏览器中都能正常工作。

通过这种方式，你可以创建一个简单而有效的二级菜单，提升用户体验。