时间戳

首页 > 解决方案 > 隐藏覆盖全屏菜单 onclick li 或释放菜单空间

javascript - 隐藏覆盖全屏菜单 onclick li 或释放菜单空间

问题描述

你能帮我写一个脚本，在单击菜单中的任何 li 元素或单击空闲菜单空间后隐藏我的覆盖菜单吗？我尝试了几个小时，但我什么也做不了，因为我刚刚开始学习 JS，我需要这个，最后一件事来完成我的项目。

这是我的笔：

codepen.io/erndolowy/pen/MXjdXg

HTML：

<header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="#section2" class="menu__link">Section 2</a></li>
      <li class="menu__item"><a href="#section3" class="menu__link">Section 3</a></li>
      <li class="menu__item"><a href="#section4" class="menu__link">Section 4</a></li>
      <li class="menu__item"><a href="#section5" class="menu__link">Section 5</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Simple Overlay Menu</a></h1>
  <h2>Bacon ipsum dolor amet tail swine picanha, corned beef landjaeger.</h2>
  <p class="support">Ernest Dołowy</p>
</main>

<div class="section2" id="section2">
  2nd section
</div>

<div class="section3" id="section3">
  3rd section
</div>

<div class="section4" id="section4">
  4th section
</div>

<div class="section5" id="section5">
  5th section
</div>

脚本：

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

}());

标签： javascriptmenuonclickhideoverlay

解决方案

只需添加现有脚本的第二行 

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

推荐阅读