我不懂 javascript，需要 html 导航栏功能的帮助答案

【问题标题】：I dont know javascript and need assistance with a html navbar function我不懂 javascript，需要 html 导航栏功能的帮助
【发布时间】：2021-12-31 11:36:14
【问题描述】：

这里是代码

它有什么问题？如果我点击这个块（汉堡）它应该触发一个块，应该触发导航活动功能。这是JS部分：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelectorAll('.nav-links');

    burger.addEventListener('click',()=>{
        nav.classList.toggle('nav-active');
    });
}

navSlide();

我的 CSS

.nav-active {
    transform: translate(0%);
}

我在 html 文件的末尾添加了 javascript 文件：

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

【问题讨论】：

querySelectorAll() 返回一个元素集合。所以集合中没有classList。您必须使用forEach 遍历导航。 developer.mozilla.org/en-US/docs/Web/API/Document/…
我建议实际学习 javascript。我的推荐是可汗学院的这门课程：khanacademy.org/computing/computer-programming/programming
不知道javascript不推荐使用DHTML。
非常感谢，我在完成 python @httpanand 我实际上使用烧瓶后会考虑它
@Wyrden ok:) 如果你对 python 有点了解的话，Flask 没问题

标签： javascript html css function web

【解决方案1】：

由于document.querySelectorAll() 返回一个NodeList 对象，您需要使用.forEach() 或使用类似for 的循环来迭代每个导航链接：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelectorAll('.nav-links');

    burger.addEventListener('click',() => {

        // nav is a collection, so we use .forEach()
        nav.forEach(n => n.classList.toggle('nav-active'));
    });
}

navSlide();

小提示：使用浏览器内的开发工具（通常按 F12 打开）检查确切的异常消息。另外：不要将您的 javascript 文件称为“java_file.js”。

【讨论】：