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');
    }
  });
})();