移动端菜单点击无响应问题求助

你遇到的问题主要由几处代码笔误和语法错误导致，下面逐一说明并给出修复方案：

1. JavaScript 核心错误：选择器拼写错误 #

你在JS代码中使用的选择器#mobile=menu是错误的，HTML里菜单的ID是mobile-menu，这里把连字符写成了等于号，导致无法找到目标DOM元素，点击事件根本无法绑定。

2. CSS 两处语法小问题 #

• .navbar__container中的max-width: 1300缺少长度单位，应改为max-width: 1300px
• .navbar__menu.active中的transition: all 0.5 ease缺少时间单位，应改为transition: all 0.5s ease

修正后的 JavaScript 代码 #

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");

menu.addEventListener("click", function () {
  menu.classList.toggle("is-active");
  menuLinks.classList.toggle("active");
});

修正后的 CSS 关键片段 #

@media screen and (max-width: 960px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px; /* 补充px单位 */
        padding: 0;
    }

    .navbar__menu.active {
        background: #131313;
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease; /* 补充s单位 */
        z-index: 99;
        height: 50vh;
        font-size: 1.6rem;
    }

    /* 其余CSS代码保持不变 */
}

额外建议：遇到这类问题时，打开浏览器开发者工具（按F12）查看控制台，这类DOM选择器错误会直接抛出类似Cannot read properties of null (reading 'addEventListener')的报错，能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者The Big Kiwi