时间戳

首页 > 解决方案 > 使用 JavaScript 切换 CSS 类 - 错误

javascript - 使用 JavaScript 切换 CSS 类 - 错误

问题描述

我正在尝试制作一个脚本，当用户单击具有“burger-nav-img”类的图像时，它会在另一个元素中切换“open”类。我的代码是：

HTML

<nav class="main-nav">
    <ul class="flex-container">
        <li class="flex-content"><a href="#">Home</a></li>
        <li class="flex-content"><a href="#">Articles</a></li>
        <div class="logo_container flex-container">
            <img src="img\logo_background.png" class="logo flex-content">
        </div>
        <li class="flex-content"><a href="#">Support</a></li>
        <li class="flex-content"><a href="#">Login</a></li>
    </ul>
<a class="burger-nav">
    <img src="img/menu.png" id="burger" class="burger-nav-img">
</a>

JavaScript

document.body.addEventListener("load", clas);
function clas() {
    document.getElementsByClassName("burger-nav-img").addEventListener("load", toggl);
}
function toggl() {
    const burger = document.getElementsByClassName("burger-nav");
    burger.classList.toggle("open");
    const main = document.getElementsByClassName("main-nav");
    main.classList.toggle("open");
}

问题是当我运行此代码时出现错误，我不知道该怎么做：

安慰

menu.js:7 Uncaught TypeError: Cannot read property 'toggle' of undefined
    at toggl (menu.js:7)
    at clas (menu.js:3)
    at menu.js:1
toggl @ menu.js:7
clas @ menu.js:3
(anonymous) @ menu.js:1

注意：menu.js 是包含 JavaScript 代码的文件；

我应该怎么办？感谢您的关注！

标签： javascripthtmlcss

解决方案

getElementsByClassName返回一个元素数组，并且一个数组没有 classList 属性，因此您得到未定义。

使用burger[0].classList或使用 Id 并getElementById返回单个元素。

推荐阅读