Mobile Nav不会在Safari中触发

Question

我构建了一个移动导航，该导航使用javascript向导航添加类“ showtime”。 这个showtime类将不透明度设置为1，可见性设置为可见。 它在Chrome中效果很好，但是在Safari和Firefox中却没有任何作用，我不确定为什么。 这是网站：

https://vamediation.squarespace.com

这是Javascript

// MOBILE NAVIGATION
function mobileNav() {
  var trigger = document.querySelector('#menuTrigger');
  var menu = document.querySelector('.main-navigation');
  var closeNode = document.querySelector('#menuClose');

  trigger.addEventListener('click', function(event) {
    event.preventDefault();

    if (menu.className !== 'showtime') {
      menu.classList.add('showtime');
    }
  });

  closeNode.addEventListener('click', function(event) {
    event.preventDefault();

    if (menu.className !== 'showtime') {
      menu.classList.remove('showtime');
    }
  });
}

mobileNav();

和showtime类：

.showtime {
  opacity: 1;
  visibility: visible;
}

我认为javascript出了点问题，因为我没有看到它添加了showtime类。 我在控制台中也没有得到任何帮助。 任何帮助，将不胜感激！

Answer 1

该函数从不调用。 将其包装在（function ....）（）;内部； 因此它在页面加载时运行。

(function mobileNav() {
  var trigger = document.querySelector('#menuTrigger');
  var menu = document.querySelector('.main-navigation');
  var closeNode = document.querySelector('#menuClose');

  trigger.addEventListener('click', function(event) {
    event.preventDefault();

    if (menu.className !== 'showtime') {
      menu.classList.add('showtime');
    }
  });

  closeNode.addEventListener('click', function(event) {
    event.preventDefault();

    if (menu.className !== 'showtime') {
      menu.classList.remove('showtime');
    }
  });
})();