How to make jquery mobile menu collapse when one of the items is clicked?

Question

JavaScript

Hello dear programmers! I tried to figure it out on my own, but in vain)

From the phone, the menu opens and closes by clicking on the burger. If you click on one of the menu items, smooth scrolling to the anchor is triggered, but the menu does not collapse and covers the screen half. How to make it roll up? Thanks in advance.

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

When you click on the menu, add the active class, when you click on the link in the menu, remove it.

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

That's about it on zhse

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

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