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

Mobile Nav不会在Safari中触发

1 个答案: