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

Question

[Minusator]

Приветствую.

Прошу помощи в решении задачи:.
Необходимо закрывать меню при клике на его пункт

JS

class ShapeOverlays {
 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();
  }
}
(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 как в пункте меню так и в shape-overlays



Благодарю за помошь!

Comments

[Alex_mos]

Я конечно не совсем понимаю чего вы хотите что бы получилось, но не легче в таком случае добавлять класс обёртке меню и удалять этот клас при клике на пункт меню, а не добавлять каждому пункту меню. Если конечно вы именно этого хотите добиться

[Minusator]

Alex_mos, я хочу чтобы при клике на global-menu__item убирался класс is-opened

Answer 1

[Alexey Levicky]

class ShapeOverlays {
 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();
  }
}
(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');
      }
    }
  });
  // Add code below
  gNavItems.forEach((item, index) => (
    item.addEventListener('click', () => {
      overlay.close();
    })
  ));
}());

Comments

[Minusator]

Uncaught TypeError: gNavItems.addEventListener is not a function

[Alexey Levicky]

Minusator, поправил, должно заработать

[Minusator]

Aleksey Levickyj, сработало но класс удалился is-opened из другой строки которая отвечает за backround меню. А сами пнукты меню никуда не делись.



Я так понимаю, что нужно задействовать цикл for.. При открытии меню именно так и сделано.

[Alexey Levicky]

Minusator, а можете скопировать через DevTools html разметку и скинуть сюда или в какую-нибудь песочницу?
Не совсем ясно как должно работать...
Нужно что бы по клику на любой элемент .global-menu__item все элементы меню исчезали? Или что бы все меню закрывалось?
Надеюсь этот вариант то что Вам нужно))

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');
      }
    })
  ));

[Minusator]

Aleksey Levickyj, благодарю вас. заработало!