汉堡菜单点击无响应问题求助（附HTML/CSS/JS代码）

汉堡菜单实现逻辑框架没问题，但点击图标后菜单无法显示，核心问题及修复方案如下：

问题代码展示 #

HTML #

<body>
<script src="script.js"></script>

<section id="header">
    <a href="#"><img id="icon-home" src="iconos/menu.jpg" alt=""></a>
    <div>
        <ul id="navbar">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="shop.html">shop</a></li>
            <li><a href="blog.html">blog</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="contact.html">contact</a></li>
            <li ><a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a></li>
        </ul>
    </div>
    <div id="mobile">
        
        <a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a>
        <i id="bar" class="fas fa-outdent"></i>

    </div>
</section>

CSS #

#mobile{
    display: none;
    align-items: center;
}  
@media (max-width:799px){
    #navbar{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: -300px;
        height: 100vh;
        width: 300px;
        background-color: #fefefe;
        box-shadow: 0 40px 60px rgb(0, 0, 0, 0.1);
        padding: 80px 0 0 10; /* 此处缺少单位，应改为10px */
    }

    #navbar.active{
        right: 0px;
    }

    #navbar li{
        margin-bottom: 25px;
    }
    #mobile{
        display: flex;
        align-items: center;
    }    
    #mobile i{
        color: #1a1a1a;
        font-size: 24px;
        padding-left: 20px;

    }
}

JavaScript #

const bar  = document.getElementById('bar');
const nav = document.getElementById('navbar');

if (bar) {
    bar.addEventListener('click', () => {
        nav.classList.add('active');
    })
};

核心问题与修复 #

1. DOM加载顺序错误
   你的<script>标签放在<body>开头，此时页面DOM还未渲染完成，document.getElementById('bar')无法找到目标元素，导致点击事件绑定失败。

   修复方案二选一：

   • 将<script src="script.js"></script>移到</body>标签的前一行；
   • 修改JS代码，用DOMContentLoaded包裹事件绑定逻辑，确保DOM加载完成后再执行：

     document.addEventListener('DOMContentLoaded', () => {
         const bar  = document.getElementById('bar');
         const nav = document.getElementById('navbar');
     
         if (bar) {
             bar.addEventListener('click', () => {
                 nav.classList.toggle('active'); // 用toggle替代add，实现点击切换菜单显示/隐藏
             })
         };
     })
     

2. CSS语法小问题
   CSS中padding: 80px 0 0 10;缺少单位，应改为padding: 80px 0 0 10px;，避免布局异常。

3. 功能优化建议
   原JS代码只能添加active类打开菜单，无法关闭。用classList.toggle('active')替代classList.add('active')，可以实现点击图标切换菜单的显示与隐藏。

4. Font Awesome资源检查
   确认页面已引入Font Awesome资源，否则<i id="bar" class="fas fa-outdent"></i>的图标无法显示（虽不影响点击功能，但会降低用户体验）。

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