我正在尝试制作一个脚本，当用户单击具有“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");
}
问题是，当我运行此代码时出现错误，我不知道该怎么做：
Console
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代码的文件；
我应该怎么办？
感谢您的关注！
getElementsByClassName返回一个元素数组，并且数组没有 classList 属性，因此您会得到未定义的结果。
Use burger[0].classList或使用 ID 和getElementById返回单个元素。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
