Как при клике на ссылку закрывалось hamburger меню?

Question

[hlebka]

Здравствуйте,
Есть hamburger меню который отображается на чекпоинте media (max-width:767px). При клике на ссылку переход к якорю работает должным образом, но чтобы показать содержимое, нужно закрыть меню. Помогите пожалуйста сделать скрипт, который будет закрывать меню, после клика на ссылку.

Ссылка на codepen - HTML+CSS+JS (jQuery)
https://codepen.io/hlebka/pen/BaPvBGd

Upd: решено, в codepen готовый результат HTML+CSS+JS (jQuery), можно пользоваться.

Answer 1

[я]

Здравствуйте. Если вам не принципиален jQuery, то вот решение на чистом JavaScript.

const burger = document.querySelector(".header__burger");
const menu = document.querySelector(".header__menu");
const menuLinks = document.querySelectorAll(".header__link");

burger.addEventListener("click", () => {
  menu.classList.toggle("active");
  burger.classList.toggle("active");
});

menuLinks.forEach((link) =>
  link.addEventListener("click", () => {
    menu.classList.remove("active");
    burger.classList.remove("active");
  })
);

Comments

[Siskin]

Отличный вариант, спасибо)

Answer 2

[Danny Arty]

$('.header__burger, .header__link').click(function (event) {
        $('.header__burger, .header__menu').toggleClass('active');
        $('body').toggleClass('lock');
});