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

您不能直接迭代节点列表，因为typeyof nodelist不是array而是object，因此要进行迭代，必须先使用{{1 }}，请在下面替换JS代码，然后查看：

Array.prototype.forEach.call

导航栏的下拉列表

1 个答案: