.AddEventListner 不是一个函数

Question

伙计们。我试图在点击时显示/隐藏移动菜单，但我不知道我做错了什么。如果您能帮助我，我将非常感激：   <script>    var menuToggle = document.getElementsByClassName('menuToggle');    var nav = document.getElementsByClassName('responsive-navigation');    menuToggle.addEventListener('click', () => {        if (nav === 'block') {            nav.style.display = "none";        } else {            nav.style.display = "block";        }    });</script>

Answer 1

getElementsByClassName()返回集合。您必须使用特定的索引。我认为您还错误地将元素本身与if条件中的属性值进行比较。

虽然我更喜欢使用querySelector()：

Document 方法返回文档中与指定选择器或选择器组匹配的querySelector() 第一个元素。如果未找到匹配项，则返回 null

var menuToggle = document.querySelector('.menuToggle');

var nav = document.querySelector('.responsive-navigation');

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

  if (nav.style.display === 'block') {

    nav.style.display = "none";

  } else {

    nav.style.display = "block";

  }

});