Hamburger菜单点击后无法切换的问题排查请求

核心问题分析 #

1. 脚本执行时机错误
   你把JS脚本放在<head>标签里，此时DOM还未渲染完成，document.querySelector找不到.hamburger和.nav-menu元素，导致事件监听器根本没绑定成功。

2. CSS选择器语法错误

   • 你写的.hamburger .active .bar是后代选择器，意思是选择.hamburger下的.active元素里的.bar，但实际active是直接加在.hamburger上的类，应该写成.hamburger.active .bar（无空格）。
   • 同理，.nav-menu .active要改成.nav-menu.active，否则无法正确触发菜单的显示动画。
   • 小屏幕下.navbar .nav-menu { display: none; }会覆盖.nav-menu.active的定位逻辑，需调整为通过left属性控制显示隐藏，配合过渡动画。

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HamBurger Nav</title>
    <link rel="stylesheet" href="ResponNavbar.css">
</head>

<body>
    <div class="header">
        <nav class="navbar">
            <a class="nav-heading" href="#">Ocean-fontier</a>
            <ul class="nav-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

        </nav>

    </div>

    <!-- 脚本移到body末尾，确保DOM已加载完成 -->
    <script src="ResponNvar.js"></script>
</body>

</html>

CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.2%;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

body {
    font-weight: bold;
    font-size: 1.2rem;
}

.header {
    background-color: #000000;
    height: 52px;
    width: 100%;
}

.header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.nav-heading {
    margin-left: 2rem;
    color: #ff6a00;
}

.nav-menu {
    display: flex;
    gap: 4rem;
}

.navbar a {
    text-decoration: none;
}

.nav-menu a {
    transition: 0.7s ease;
    margin-right: 4rem;
    color: #fff;
}

.nav-menu a:hover {
    color: rgb(0, 72, 136);
}

.hamburger {
    display: none;
    cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #f7f7f7f7;
}

@media(max-width:768px) {
    .hamburger {
        display: block;
        margin-right: 3rem;
    }

    /* 移除display:none，改用left属性控制隐藏，配合transition动画 */
    .navbar .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: #000000;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        cursor: pointer;
    }

    /* 修正选择器：.hamburger.active 而非 .hamburger .active */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu a {
        margin: 16px 0;
    }

    /* 修正选择器：.nav-menu.active 而非 .nav-menu .active */
    .nav-menu.active {
        left: 0;
    }
}

JavaScript代码（无需修改，确保加载时机正确即可） #

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
})

关键修复点总结 #

• 将JS脚本移到<body>标签末尾，确保DOM元素加载完成后再执行脚本。
• 修正CSS中.hamburger .active和.nav-menu .active的选择器，去掉空格改为.hamburger.active和.nav-menu.active。
• 小屏幕下移除.nav-menu的display:none，统一用left属性配合transition控制菜单的显示隐藏，避免动画冲突。
• 给.hamburger添加cursor: pointer，提升用户交互体验。

内容的提问来源于stack exchange，提问作者Kai