简体   繁体   中英

Close full screen nav overlay when link clicked

I am attempting to use a full screen nav overlay. Everything works pretty well, but I am having issues with closing it when a nav link is clicked. Currently a clicked link just takes you to the anchored section, but the overlay doesn't get removed.

Here is the fiddle of the current project and I've copied the js below.

I appreciate any help/advice you can give.

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

}());

You didn't have the action function for clicked item. You can use it on menu_list class:

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

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

Take a look at the fiddle again: https://jsfiddle.net/w6n217xc/2/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM