Skip to content
Advertisement

how to close the menu when clicking on a link?

I have a code, but I need help please, how can I close the menu when clicking on a link item. that’s what I’m stuck on

$('.burger').on('click', function() {
  $(this).toggleClass('active');
  $('.menu__list').slideToggle();
});

let ul = document.querySelector('.menu__list');
let li = document.querySelectorAll('.menu__link');

li.forEach(el => {
  el.addEventListener('click', function() {
    ul.querySelector('.menu__link--active').classList.
    remove('menu__link--active');

    el.classList.add('menu__link--active');
  });
});

Advertisement

Answer

Just add .slideToggle() to the click listener:

$('.burger').on('click', function() {
  $(this).toggleClass('active');
  $('.menu__list').slideToggle();
});

let ul = document.querySelector('.menu__list');
let li = document.querySelectorAll('.menu__link');

li.forEach(el => {
  el.addEventListener('click', function() {
    ul.querySelector('.menu__link--active').classList.
    remove('menu__link--active');

    el.classList.add('menu__link--active');
    $('.menu__list').slideToggle();
  });
});
Advertisement