How to make the menu of the mobile version of the site close after a click?

Question

User navigation

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;
        });

I just can’t make the menu close after clicking on the landing page, I tried different options. Knowledge is not much, everything I could try.
Site with this menu tarif-svoim.ru

Answer 1

SOLUTION: Helped on a freelance site. It was just necessary to add the code to the theme.js file:

$('.main-navigation ul li a').on('click', function() {
        $('.main-navigation').hide();
    });

The complete code came out like this:

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;
    });
    $('.main-navigation ul li a').on('click', function() {
        $('.main-navigation').hide();
    });
}