.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() 第一个元素。如果未找到匹配项，则返回 nullvar 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";  }});