Скрыть мобильное меню при нажатии на пункт (WP)

Question

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

При нажатии на любой пункт, сайт пролистывается до нужного участка (заголовка), но меню при этом остается открытым.

Скажите, как сделать так, чтобы при нажатии на любой пункт меню, оно сворачивалось/закрывалось?

JS-код мобильного меню:

//mobile-menu
    var winWidth = $(window).width();

    if (winWidth < 1025) {
        $('#menu-opener').click(function() {
            $('body').addClass('menu-open');

            $('.btn-close-menu').click(function() {
                $('body').removeClass('menu-open');
            });
        });

        $('.overlay').click(function() {
            $('body').removeClass('menu-open');
        });

        $('.main-navigation').prepend('<div class="btn-close-menu"></div>');

        $('.main-navigation ul .menu-item-has-children').append('<div class="angle-down"></div>');

        $('.main-navigation ul li .angle-down').click(function() {
            $(this).prev().slideToggle();
            $(this).toggleClass('active');
        });
    }

    if (winWidth > 1024){
        $("#site-navigation ul li a").focus(function() {
            $(this).parents("li").addClass("focus");
        }).blur(function() {
            $(this).parents("li").removeClass("focus");
        });
    }

Answer 1

Без html не совсем понятно (что такое .overlay?), может стоит повесить на событие клика по кнопкам меню удаление класса removeClass('menu-open').

Answer 2

Мой вариант:

<script>
var menu = jQuery('.theme-main-menu');
var burger = menu.find('.navbar-toggle');
menu.find('.menu-item a').on('click', function(){
    if(!burger.hasClass('collapsed')){
        burger.trigger('click');
    }
});
</script>

БЛОГ НА HUSL

Скрыть мобильное меню при нажатии на пункт (WP)

Ответы (2 шт):