JS与HTML关联失效导致移动端导航栏菜单无法触发问题求助

问题修复方案 #

你遇到的点击无响应问题均为代码书写错误导致，和VS Code无关，具体错误及修复方法如下：

• HTML 脚本标签书写错误：引入JS的标签名为<script>，你写的<scripts>多了后缀s，导致JS文件完全没有加载执行，直接删除多余的s即可，同时删除logo标签后多余的乱码字符tion
• JavaScript 函数名大小写不匹配：你定义的函数名为mobilemenu，绑定点击事件时传入的是mobileMenu（首字母M大写），JS区分大小写，触发点击时找不到对应函数，统一函数名写法即可
• JavaScript DOM属性拼写错误：menulinks.classlist.toggle中的classlist需要改为驼峰写法classList，小写写法属于不存在的属性，执行时会抛出错误中断逻辑
• CSS 逻辑缺失：你没有定义.navbar__menu.active对应的移动端显示规则，就算JS执行成功也看不到菜单弹出效果，同时现有CSS存在多处语法错误：#navbar__logo下的background-image行末尾缺分号、background-size属性后缺冒号、移动端媒体查询代码未闭合

修正后的核心代码

JavaScript 代码

const menu = document.querySelector('#mobile-menu');
const menulinks = document.querySelector('.navbar__menu');

// 展示移动端菜单
const mobileMenu = () => {
    menu.classList.toggle('is-active');
    menulinks.classList.toggle('active');
};

menu.addEventListener('click', mobileMenu);

补充后的移动端CSS代码（追加到你现有CSS末尾即可）

#navbar__logo {
    /* 修复原有语法错误 */
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%; 
}

@media screen and (max-width: 960px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;    
    }
    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.5s ease;
        height: 50vh;
        z-index: -1;
        background: #131313;
    }
    .navbar__menu.active {
        top: 100%;
        opacity: 1;
        z-index: 99;
    }
    #mobile-menu .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background: #fff;
        display: block;
        transition: all 0.3s ease-in-out;
    }
    /* 汉堡菜单转叉号动画 */
    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

内容的提问来源于stack exchange，提问作者Soul-Man