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: none;
    padding: 0;
}

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

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

.submenu li {
    display: block;
}

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

.submenu li 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';
            }
        });

        item.addEventListener('click', function(event) {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                event.preventDefault();
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
});

解释

HTML结构：创建了一个包含二级菜单的列表结构。
CSS样式：定义了菜单和子菜单的样式，包括显示和隐藏子菜单的样式。
JavaScript事件处理：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 为每个菜单项添加mouseenter和mouseleave事件，用于在鼠标悬停时显示子菜单，离开时隐藏子菜单。
- 为每个菜单项添加click事件，用于在点击时切换子菜单的显示状态。