我的JavaScript汉堡菜单代码完全无响应，请求排查解决

API 探路者

2026-7-22

汉堡菜单JS代码不生效的解决方案

我第一次使用JavaScript，跟着教程写了汉堡菜单的代码，但点击汉堡按钮完全没反应。哪怕直接复制教程里的完整代码到VS Code，问题还是一样。试过换浏览器、调整文件位置，代码在VS Code和在线检测工具里都没报错。以下是我的代码：

HTML代码

<!DOCTYPE html>

<html>
    <head>
        <title>Hot Beans</title>
        <link rel="icon" type="image/x-icon" href="images/favicon.ico">
        <link rel="stylesheet" href="styles/master.css">
        <script src="scripts/scripts.js"></script>
        <!--Tells the browser what character encoding is used-->
        <meta charset="UTF-8">
        <meta name="description" content="Hot Beans Website">
        <!--keywords for SEO-->
        <meta name="keywords" content="About us, Home page, Our history, Facts, Hot beans">
        <meta name="author" content="Joshua Kelly">
        <!--changes the wesite dimentions to fit a device accordingly-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/3335f31310.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="disable-select">
            <nav class="navbar">
                <div class="logo"><img src="images/logo.png" alt="Hot Beans Logo" title="Logo"></div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="top-row">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Meet The Team</a></li>
                        <li><a href="#">Vacancies and Qualifications</a></li>
                        <li><a href="#">Web Dev Courses</a></li>
                        <li><a href="#">Apply</a></li>
                    </ul>
                </div>
            </nav>
        </div>

        <div class="html-js-css" ><img src="images/html-js-css.png" alt="Picture of Html, JS and CSS logo's" title="html-js-css"></div>

        <h1 class="about-us">About Us</h1>
        <p class="about-us-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti numquam fugiat iste harum reiciendis? Labore quidem architecto a et minus, ad blanditiis, maiores magni dolorum consectetur ab temporibus quae dolor? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem perspiciatis dolorem animi. Molestiae aspernatur totam perferendis, esse ex ipsam quasi quos consequuntur, sequi veniam dolores error provident soluta quas vitae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto doloremque tenetur facere aut necessitatibus eaque, velit porro hic, placeat suscipit molestiae! Totam eaque ab deleniti illo corrupti hic consequuntur repellat.</p>

        <div class="logo-colour"><img src="images/logo-color.png" alt="Banner Hot Beans Logo" title="Hot Beans History"></div>

        <div class="history-grid">
            <div class="grid-item hist-image-1"><img src="images/beans-can.png"></div>
            <div class="grid-item hist-text-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus error saepe omnis corporis! Voluptates ipsam consequatur voluptatibus magni reiciendis perferendis non harum quis, eius tenetur laborum voluptatum nisi odio beatae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio rem blanditiis voluptatum quibusdam nostrum, quasi aut ex architecto dolores. Distinctio, minima? Dicta aperiam voluptatibus blanditiis ratione ullam facilis provident.</div>
            <div class="grid-item hist-text-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rerum voluptate eaque vitae voluptatem, ipsam libero vero adipisci, a delectus quisquam expedita soluta sed nulla deleniti maiores distinctio asperiores eveniet? Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, fugit! Reprehenderit sunt ducimus velit, voluptates ab provident molestiae cupiditate delectus at dolores nisi eos totam doloribus earum fuga consectetur accusamus.</div>
            <div class="grid-item hist-image-2"><img src="images/favicon.ico"></div>
        </div>
        <br>
        <h1 class="share-us-on">Share Us On</h1>

        <div class="share-btn">
            <a href="#"><i class="fa-brands fa-square-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-square-instagram"></i></a>
            Copy Link:
            <a href="#"><i class="fa-solid fa-link"></i></a>
        </div>
    </body>
</html>

CSS代码

* {
    box-sizing: border-box;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Oleo Script', cursive;
}

img {max-width:50%;}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#D9BCA9;
}

.top-row ul{
    display: flex;
    margin: 0;
    padding: 0;
}

.top-row li{
    list-style: none;
}

.top-row li a{
    text-decoration: none;
    padding: 1rem;
    display:block;
    color: black;
}

.top-row li:hover{
    background-color: #e6c6b1;
}

.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: black;
    border-radius: 10px;
}

@media(max-width: 600px){
    .toggle-button{
        display: flex;
    }

    .top-row {
        display: none;
        width: 100%;
    }

    .navbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .top-row ul{
        width: 100%;
        flex-direction: column;
    }

    .top-row li{
        text-align: center;
    }

    .top-row li a{
        padding: .5rem 1rem;
    }

    .top-row.active{
        display: flex;
    }
}

.logo{
    margin-right: auto;
    max-width: 25%;
}

.disable-select{    
    user-select: none;
}

.html-js-css{
    display: flex;
    justify-content: center;
    margin-top: 4rem
}

.about-us{
    text-align : center;
    margin-top: 3rem
}

.about-us-text{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.logo-colour{
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    background-color: #D9BCA9;
}

.history-grid {
    display: grid;
    grid-template-columns: 25% 25%;
    grid-template-rows: 50% 50%;
    margin: 4rem;
    text-align: center;
    justify-content: center;
    gap: 4rem;
}

.hist-image-1, .hist-text-1, .hist-text-2, .hist-image-2{
    margin-top: auto;
    margin-bottom: auto;
}

@media (max-width: 60em) {
    .history-grid{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 25%);
        gap:4rem
    }
}

.share-us-on{
    text-align : center;
    margin-top: 9rem
}

.share-btn{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 217px;
    padding: 20px;
    background-color: #D9BCA9;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
}

.share-btn:hover{
    transform: scale(1.1)
}

.share-btn a{
    color: black;
    font-size: 18px;
}

JS代码

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const topRow = document.getElementsByClassName('top-row')[0]

toggleButton.addEventListener('click', () => {
  topRow.classList.toggle('active')
})

问题原因

核心问题是JS脚本加载时机错误。你的JS脚本放在<head>标签内，浏览器会优先加载并执行这段代码，但此时<body>中的DOM元素（比如.toggle-button和.top-row）还未完成渲染，导致document.getElementsByClassName无法找到目标元素，后续的点击事件绑定也就不会生效。

修复方案

提供两种可行的解决方法：

方法一：将JS脚本移至`<body>`末尾

把<script src="scripts/scripts.js"></script>移动到</body>标签的前方，确保浏览器先渲染完所有DOM元素后再执行JS代码。修改后的HTML结构如下：

<!-- 其他body内容保持不变 -->
        <div class="share-btn">
            <a href="#"><i class="fa-brands fa-square-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-square-instagram"></i></a>
            Copy Link:
            <a href="#"><i class="fa-solid fa-link"></i></a>
        </div>
        <!-- 移到此处 -->
        <script src="scripts/scripts.js"></script>
    </body>
</html>

方法二：为JS代码添加DOM加载完成监听

如果不想调整脚本位置，可以在JS代码外层包裹DOMContentLoaded事件监听，确保代码仅在DOM完全加载后执行：

document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementsByClassName('toggle-button')[0]
    const topRow = document.getElementsByClassName('top-row')[0]

    toggleButton.addEventListener('click', () => {
        topRow.classList.toggle('active')
    })
})

验证

两种方法都能解决问题，推荐使用方法一，这是前端开发中优化加载顺序的通用最佳实践。

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

我的JavaScript汉堡菜单代码完全无响应，请求排查解决

HTML代码 #

CSS代码 #

JS代码 #

问题原因 #

修复方案 #

方法一：将JS脚本移至<body>末尾