.AddEventListener 不是函数

Question

伙计们。我正在尝试 show/hide 单击移动菜单，但我不知道自己做错了什么。如果您能帮助我，我将不胜感激：

   <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()returnscollection。您必须使用特定的 index。我认为您还错误地将元素本身与 if 条件中的属性值进行了比较。

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

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned

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";
  }
});

.AddEventListener 不是函数

.AddEventListner is not a fuction

html

javascript

dom

responsive