javascript - 导航栏的下拉列表

Question

目前，我正在使用 HTML、CSS 和 JS 构建导航栏。我遇到了 JS 部分的问题，该部分应该使切换按钮下拉并在调整页面大小时显示所有可用的链接。当我调试代码时，我收到一条错误消息，指出“无法读取 null 的属性‘addEventListener’”。我该如何解决这个问题？

HTML

    <div class='Navbar'>

 <a href=''>EVENTS</a>

 <a href=''>FOOD</a>

 <a href=''>FUN</a>

 <img id='center-logo' src='img/SAMO.png'>  

        <a href=''>VISIT</a>

        <a href=''>GET INVOLVED</a>

        <a href=''>HISTORY</a> 

        <div style="font-size: 20px;" id='Navbar_Link-Toggle'>

            <i class="fas fa-bars"></i>

        </div> 

    </div>    

CSS

@media only screen and (max-width: 1000px) {

  img,

  .Navbar {

    text-align: left;

    margin-top: 2%;

  }

  a {

margin-left: 0;


    display: none;

  }

  .Navbar__ToggleShow {

    display: flex;

  }

#Navbar_Link-Toggle {

  align-self: flex-end;

  display: initial;

  float: right;

  margin-top: 2%;

}

}

JS

const toggle = document.querySelector('#Navbar_Link-Toggle');

const nav = document.querySelector('#Navbar_Link-Toggle')

const toggleMenu = () => {

  const tags = document.getElementsByTagName('a');

    tags.forEach(tag => 

tag.classList.toggle('Navbar__ToggleShow'));

}

nav.addEventListener('click', toggleMenu);

Answer 1

你不能直接迭代nodelist，因为typeyof nodelist不是array而是object，因此要迭代相同的，你有首先使用Array.prototype.forEach.call将nodelist转换为数组，请将JS代码替换为以下代码并查看:

const toggle = document.querySelector('#Navbar_Link-Toggle');

const nav = document.querySelector('#Navbar_Link-Toggle')

const toggleMenu = () => {

const tags = document.getElementsByTagName('a');

Array.prototype.forEach.call(tags, function (tag) {
 console.log(tag);
 tag.classList.toggle('Navbar__ToggleShow');
});

}

nav.addEventListener('click', toggleMenu);