Question

我正在尝试使用全屏导航覆盖。一切都运作良好，但是我在点击导航链接时遇到问题。目前，点击的链接只会将您带到锚定部分，但叠加层不会被删除。

以下是当前项目的fiddle，我已经复制了下面的j。

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

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/

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

1 个答案: