移动端站点菜单无法正常工作，请问我的代码存在哪些问题？

问题修正方案 #

1. JS代码错误修正

你现有JS存在三处语法问题：

• getElementsByClassName 仅需传入纯类名作为参数，不需要加.前缀
• getElementsByClassName 返回的是匹配元素的集合，需要取第一个元素才能绑定事件
• classList.toggle 传入的类名不需要加.前缀

修正后的JS代码如下：

const btn_mobile = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

btn_mobile.addEventListener('click', function () {
    menu.classList.toggle('active');
})

如果要沿用getElementsByClassName的写法，改为如下即可：

const btn_mobile = document.getElementsByClassName('hamburger')[0];
const menu = document.getElementsByClassName('menu')[0];

btn_mobile.addEventListener('click', function () {
    menu.classList.toggle('active');
})

2. HTML的JS引入错误修正

你当前的script标签写法错误，没有正确引入外部JS文件，将页面底部的<script>src = script.js </script>替换为：

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

如果不使用外部JS文件，也可以直接把修正后的JS代码写在这个script标签内部，放在所有DOM元素的后面即可正常运行。

额外优化提示

你的HTML代码中.hamburger元素的后面多了一个多余的</div>闭合标签，建议删除，避免出现未知布局异常。

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