用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>
    <nav class="navbar">
        <ul class="nav-list">
            <li class="nav-item">
                <a href="#">首页</a>
            </li>
            <li class="nav-item">
                <a href="#" class="dropdown-toggle">产品</a>
                <ul class="dropdown-menu">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品3</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#">关于我们</a>
            </li>
            <li class="nav-item">
                <a href="#">联系我们</a>
            </li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-item {
    position: relative;
}

.nav-item a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
}

.nav-item a:hover {
    background-color: #555;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 150px;
}

.dropdown-menu li a {
    padding: 10px 20px;
}

.dropdown-menu li a:hover {
    background-color: #555;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle');

    dropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            const dropdownMenu = this.nextElementSibling;
            if (dropdownMenu.style.display === 'block') {
                dropdownMenu.style.display = 'none';
            } else {
                dropdownMenu.style.display = 'block';
            }
        });
    });
});