Как закрыть меню при клике на его пункт?

[alexein66]

Доброго дня.

Есть скрипт открытия меню по кнопке

Спойлер: Скрипт

class ShapeOverlays {
  constructor(elm) {
    this.elm = elm;
    this.path = elm.querySelectorAll('path');
    this.numPoints = 2;
    this.duration = 600;
    this.delayPointsArray = [];
    this.delayPointsMax = 0;
    this.delayPerPath = 200;
    this.timeStart = Date.now();
    this.isOpened = false;
    this.isAnimating = false;
  }
  toggle() {
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = 0;
    }
    if (this.isOpened === false) {
      this.open();
    } else {
      this.close();
    }
  }
  open() {
    this.isOpened = true;
    this.elm.classList.add('is-opened');
    this.timeStart = Date.now();
    this.renderLoop();
  }
  close() {
    this.isOpened = false;
    this.elm.classList.remove('is-opened');
    this.timeStart = Date.now();
    this.renderLoop();
  }
  updatePath(time) {
    const points = [];
    for (var i = 0; i < this.numPoints; i++) {
      const thisEase = this.isOpened ?
                        (i == 1) ? ease.cubicOut : ease.cubicInOut:
                        (i == 1) ? ease.cubicInOut : ease.cubicOut;
      points[i] = thisEase(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
    }

    let str = '';
    str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `;
    for (var i = 0; i < this.numPoints - 1; i++) {
      const p = (i + 1) / (this.numPoints - 1) * 100;
      const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
      str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
    }
    str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`;
    return str;
  }
  render() {
    if (this.isOpened) {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)));
      }
    } else {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
      }
    }
  }
  renderLoop() {
    this.render();
    if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
      requestAnimationFrame(() => {
        this.renderLoop();
      });
    }
    else {
      this.isAnimating = false;
    }
  }
}

(function() {
  const elmHamburger = document.querySelector('.hamburger');
  const gNavItems = document.querySelectorAll('.global-menu__item');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  elmHamburger.addEventListener('click', () => {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      elmHamburger.classList.add('is-opened-navi');
      for (var i = 0; i < gNavItems.length; i++) {
        gNavItems[i].classList.add('is-opened');
      }
    } else {
      elmHamburger.classList.remove('is-opened-navi');
      for (var i = 0; i < gNavItems.length; i++) {
        gNavItems[i].classList.remove('is-opened');
      }
    }
  });
}());

При клике на кнопку меню происходит добавление класса is-opened в этих местах



HTML меню

 <div class="content content--demo-3">
                            <div class="hamburger hamburger--demo-3 js-hover">
                                <div class="hamburger__line hamburger__line--01">
                                    <div class="hamburger__line-in hamburger__line-in--01"></div>
                                </div>
                                <div class="hamburger__line hamburger__line--02">
                                    <div class="hamburger__line-in hamburger__line-in--02"></div>
                                </div>
                                <div class="hamburger__line hamburger__line--03">
                                    <div class="hamburger__line-in hamburger__line-in--03"></div>
                                </div>
                                <div class="hamburger__line hamburger__line--cross01">
                                    <div class="hamburger__line-in hamburger__line-in--cross01"></div>
                                </div>
                                <div class="hamburger__line hamburger__line--cross02">
                                    <div class="hamburger__line-in hamburger__line-in--cross02"></div>
                                </div>
                            </div>

                            <div class="global-menu">
                                <div class="global-menu__wrap">
                                    <a class="global-menu__item global-menu__item--demo-3" href="/">Главная</a>
                                    <a class="global-menu__item global-menu__item--demo-3" href="/#about">Обо мне</a>
                                    <a class="global-menu__item global-menu__item--demo-3" href="/#portfolio">Портфолио</a>
                                    <a class="global-menu__item global-menu__item--demo-3" href="/#services">Услуги</a>
                                    <a class="global-menu__item global-menu__item--demo-3" href="/#contacts">Контакты</a>
                                </div>
                            </div>
                            <svg class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
                                <path class="shape-overlays__path"></path>
                                <path class="shape-overlays__path"></path>
                                <path class="shape-overlays__path"></path>
                            </svg>
                        </div>

Как при клике на .global-menu__item убирать классы is-opened из ссылок и .shape-overlays?

 

[Sorcus]

Удали строки this.elm.classList.add('is-opened');, this.elm.classList.remove('is-opened'); и

for (var i = 0; i < gNavItems.length; i++) {
    gNavItems[i].classList.add('is-opened');
}

for (var i = 0; i < gNavItems.length; i++) {
    gNavItems[i].classList.remove('is-opened');
}

А shape-overlays у тебя в html прописан, так что удаляй лапками.

 

[alexein66]

Удали строки this.elm.classList.add('is-opened');, this.elm.classList.remove('is-opened'); и

for (var i = 0; i < gNavItems.length; i++) {
    gNavItems[i].classList.add('is-opened');
}

for (var i = 0; i < gNavItems.length; i++) {
    gNavItems[i].classList.remove('is-opened');
}

А shape-overlays у тебя в html прописан, так что удаляй лапками.

Решил так

gNavItems.forEach((item, index) => (
      item.addEventListener('click', (e) => {
        overlay.close();
        elmHamburger.classList.remove('is-opened-navi');
        for(var i = 0; i < gNavItems.length; i++) {
          gNavItems[i].classList.remove('is-opened');
        }
      })
  ));