Как сделать что бы мобильное меню на jquery сворачивалось при клике по одному из пунктов?

Question

[Максим Кузьмищев]

Здравствуйте уважаемые программисты! Пытался разобраться самостоятельно, но тщетно)

С телефона, меню раскрывается и закрывается по клику на бургер. Если кликнуть по одному из пунктов меню - срабатывает плавная прокрутка к якорю, но меню при этом не сворачивается и закрывает пол экрана. Как сделать что бы сворачивалось? Заранее благодарен.

if ($('.main-navigation .navigation-box .sub-menu').length) {
        var subMenu = $('.main-navigation .sub-menu');
        subMenu.parent('li').children('a').append(function() {
            return '<button class="sub-nav-toggler"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>';

        });
        var mainNavToggler = $('.header-navigation .menu-toggler');
        var subNavToggler = $('.main-navigation .sub-nav-toggler');
        mainNavToggler.on('click', function() {
            var Self = $(this);
            var menu = Self.data('target');
            $(menu).slideToggle();
            $(menu).toggleClass('showen');
            return false;
        });
        subNavToggler.on('click', function() {
            var Self = $(this);
            Self.parent().parent().children('.sub-menu').slideToggle();
            return false;
        });
    }

<nav class="navbar navbar-expand-lg navbar-light header-navigation stricky">
                <div class="container clearfix">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="logo-box clearfix">
                        <a class="navbar-brand" href="index.html">
                            <img src="images/logo-1-1.png" class="main-logo" alt="Awesome Image" />
                        </a>
                        <button class="menu-toggler" data-target=".header-one .main-navigation ">
                            <span class="fa fa-bars"></span>
                        </button>
                    </div><!-- /.logo-box -->
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="main-navigation">
                        <ul class="navigation-box one-page-scroll-menu">

                            <li class="scrollToLink">
                                <a href="#price">Цены</a>
                            </li>


                                                  <li class="scrollToLink">
                                <a href="#komand">Команда</a>
                            </li>

                                                        <li class="scrollToLink">
                                <a href="#otzivi">Отзывы</a>
                            </li>

                                                        <li class="scrollToLink">
                                <a href="#pricing">Стоимость по фото</a>
                            </li>
                                  <li class="scrollToLink">
                                <a href="#faqs">Вопрос ответ</a>
                            </li>
                                                        <li class="scrollToLink">
                                <a href="#kontakty">Контакты</a>
                                <ul class="sub-menu">
                                    <li><a href="tel:[phone]">[phone]</a></li>
                                    <li><a href="https://api.whatsapp.com/send?phone=7910000000&text=Здравствуйте!.">Чат WhatsApp</a></li>
                                </ul><!-- /.sub-menu -->
                            </li>
                        </ul>

                    </div><!-- /.navbar-collapse -->
                </div>
            </nav>

Answer 1

[G F]

При клике на меню добавляй класс active, при клике на ссылку в меню убирай.

.menu {
  display: none;
}
.menu.active {
  dispay: block
}

Вот примерно так на жсе

const navigation = document.querySelector('.main-navigation')
const handleNavigationClick = e => {
  if (!e.target.classList.contains('scrollToLink') {
    return
  }

 *Удалить класс showen с менюхи*
}
navigation.addEventListener('click', handleNavigationClick)

Comments

[Максим Кузьмищев]

Спасибо! Логика понятна, но с синтаксисом jquery затруднения) Сейчас вижу через дэбагер что кликая по бургеру у div .main-navigation меняется style="display: none/block" но как бы усовершенствовать имеющийся код?

[G F]

Не знаю даже, а я жиквери не пишу. А усовершенствовать можно переписав на es6 хотя бы.