JavaScript响应式汉堡菜单点击事件失效问题求助

问题说明 #

正在使用HTML、CSS和JavaScript制作个人网站的响应式汉堡菜单，需求为屏幕宽度小于800px时，点击汉堡菜单可展开下拉菜单，但目前点击汉堡菜单后无任何响应，尝试用document.querySelector(".hamburger")修改后仍未解决。

代码问题分析 #

原JavaScript代码存在以下核心问题：

• document.getElementsByClassName()返回的是HTMLCollection类数组对象，不是单个DOM元素，直接调用.onclick或.classList会触发报错，需要取数组中的第一个元素（页面中仅存在一个汉堡菜单和一个navbar）
• 多余的document.body.classList.toggle("active")代码，当前场景无对应样式逻辑，属于无效代码
• 未正确获取navbar元素并操作其类名

修复后的完整代码 #

HTML代码（无需修改） #

<body>
    <section class="content" id="home">
        <div class="taskbar">
            <h2 class="logo">Personal Web</h2>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <nav class="navbar">
                <ul>
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#self-description" class="active">Self Description</a></li>
                    <li><a href="#interest" class="active">Interest</a></li>
                    <li><img src="img/moon.png" id="icon" class="active"></li>
                </ul>
            </nav>
        </div>
    </section>
</body>

CSS代码（确保包裹在媒体查询内） #

@media (max-width: 800px) {
    .hamburger{
        display: block;
        cursor: pointer;
        padding: 0 10px;
    }

    .hamburger .line{
        width: 30px;
        height: 3px;
        background: #fefefe;
        margin: 6px 0;
    }

    .navbar{
        height: 0;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        width: 100vw;
        background-color: var(--navbar-color);
        transition: 0.2s;
        overflow: hidden;
    }

    .navbar.active{
        height: 25%;
        margin: 0;
    }

    .navbar ul{
        text-align: center;
        display: block;
        width: fit-content;
        margin: 55px auto 0 auto;      
        transition: 0.5s;
        opacity: 0;
    }

    .navbar ul li{
        display: block;
        font-size: 0.7rem;
    }

    .navbar.active ul{
        opacity: 1;
    }

    .navbar ul li a{
        margin-bottom: 12px;
        color: aliceblue;
    }
}

修复后的JavaScript代码 #

方案一（使用getElementsByClassName）

// 获取汉堡菜单元素（取类数组第一个元素）
const hamburger = document.getElementsByClassName("hamburger")[0];
// 获取navbar元素
const navBar = document.getElementsByClassName("navbar")[0];

// 绑定点击事件切换菜单状态
hamburger.onclick = function() {
    navBar.classList.toggle("active");
}

方案二（使用querySelector更简洁）

const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".navbar");

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

额外说明 #

• 务必确保CSS中的汉堡菜单和navbar样式都包裹在@media (max-width: 800px)媒体查询内，只有屏幕宽度小于800px时才会触发响应式逻辑
• 如果修复后仍无效果，可打开浏览器控制台（F12）查看报错信息，排查是否存在变量未定义或DOM元素获取失败的问题

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