Burger menu — в чем может быть проблема?

Question

[Алексей]

Здравствуйте!
Написал код, который вызывает burger menu, но проблема в том, что после выбора оглавления, перемещение на необходимый раздел происходит, но само меню не скрывается автоматически, а только через нажатие на оверлей. Подскажите, что то никак не могу сообразить, как написать условие, что бы меню скрывалось автоматически после перехода на необходимый раздел, а не через нажатие оверлея?

$('document').ready(function () {
  $('.burger').click(function (event) {
     $('.burger,.menu-mobile,.mobile-menu-overlay').toggleClass('active');
     $('body').toggleClass('lock');
  });
  $('.mobile-menu-overlay').click(function (e) {
     $('.burger,.mobile-menu-overlay,.menu-mobile').removeClass('active');
     $('body').toggleClass('lock');
  });
});
// HTML element
document.body.insertAdjacentHTML('beforebegin', `<div class="mobile-menu-wrapper">
     <div class="mobile-menu-overlay"></div>
     <ul class="menu-mobile">
       <li class="mobile-menu__item"><a href="#" class="mobile-menu__link menu__link link">Главная</a>
       </li>
       <li class="mobile-menu__item"><a href="#branches" class="mobile-menu__link menu__link link">Обо мне</a></li>
       <li class="mobile-menu__item"><a href="#gallery" class="mobile-menu__link menu__link link">Галерея</a></li>
       <li class="mobile-menu__item"><a href="#services" class="mobile-menu__link menu__link link">Услуги</a></li>
       <li class="mobile-menu__item"><a href="#reviews" class="mobile-menu__link menu__link link">Отзывы</a></li>
       <li class="mobile-menu__item"><a href="#contacts" class="mobile-menu__link menu__link link">Контакты</a></li>
       <li class="mobile-menu__item mobile-menu__flex">
            <!-- noindex -->
	<a href="#" rel="nofollow noopener noreferrer" class="logo__WhatsApp" target="_blank"></a>
	<!-- /noindex -->
        </li>
        <li class="mobile-menu__item mobile-menu__flex">
        <!-- noindex -->
        <a href="#" rel="nofollow noopener noreferrer" class="logo__instagram" target="_blank"></a>
        <!-- /noindex -->
    </li>
    <li class="mobile-menu__item mobile-menu__flex">
        <!-- noindex -->
        <a href="#" rel="nofollow noopener noreferrer" class="ink logo__vk" target="_blank"></a>
        <!-- /noindex -->
    </li>
     </ul>
   </div>`);

Answer 1

[Павел]

Ну, наверное, нужно отслеживать событие клика по пункту меню, и убирать класс acivate, как вы это делаете на оверлее...

Comments

[Алексей]

....в том то и дело, что логика действий понятна, но реализовать пока получилось только через оверлей)
Ни как не пойму, как прописать функцию события клика по пункту меню (

[Алексей]

разобрался и все получилось
действительно, все оказалось очень просто

$(".mobile-menu__link").click(function (e) {
    $('.burger,.mobile-menu-overlay,.menu-mobile').removeClass('active');
    $('body').toggleClass('lock');
}