javascript - 单击链接时关闭全屏导航覆盖

Question

我正在尝试使用全屏导航覆盖。一切正常，但我在单击导航链接时无法关闭它。目前，单击链接只会将您带到锚定部分，但不会删除叠加层。

这是 fiddle当前元素，我复制了下面的 js。

非常感谢您提供的任何帮助/建议。

JS

(function() {

  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');

    var active = false;

    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }

        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }

        active = false;
      }
    };

    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  Menu.init();

}());

Answer 1

您没有点击元素的操作功能。您可以在 menu_list 类上使用它:

var menuItemClicked = function() {
      menuList.addEventListener('click', toggleMenu, false);
}

var init = function() {
      bindActions();
      menuItemClicked();
};

再看看 fiddle :https://jsfiddle.net/w6n217xc/2/