單擊鏈接時關閉全屏導航覆蓋

Question

我正在嘗試使用全屏導航覆蓋。 一切正常，但單擊導航鏈接時關閉它時出現問題。 當前，單擊鏈接僅會將您帶到錨定部分，但不會刪除覆蓋層。

這是當前項目的小提琴 ，我已經復制了下面的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();
};

再次看看小提琴： https : //jsfiddle.net/w6n217xc/2/