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

Question

Помогите плиз. Как сделать чтоб моб меню закрывалось, при клике на ссылку

  $('#OpenMobMenu').click(function() {
            $('body').toggleClass('active-menu')
            $(this).toggleClass('active');
            $('header .navigation').toggleClass('active');
        });

<body>
<header>
    <div class="container">
        <div class="header-container">
            <div class="button-open">
                <button id="OpenMobMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <div class="logo">
                <img src="image/logo.svg" alt="">
            </div>
            <div class="navigation">
                <nav class="nav-list">
                    <ul>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#products">Продукты</a></li>
                        <li><a href="#buy">Где купить</a></li>
                        <li><a href="#services">Сервисы</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

Answer 1

Из вопроса можно лишь понять, что надо закрывать OpenMobMenu при нажатии на ссылки.
Пример:

    $('#OpenMobMenu').click(function() {
        $('body').toggleClass('active-menu');
        $(this).toggleClass('active');
        $('header .navigation').toggleClass('active');
    });
    var z = $('.nav-list').children('ul').children('li').children('a');
    let z1 = Array.from(z);

    z1.forEach(function (a) {
        $(a).on('click', function () {
            $('.button-open').toggleClass('nonactive');
        })
    })

    .button-open{
        background-color: #003eff;
        width: 150px;
        text-align: center;
        border-style: double;
    }
    .active {
        opacity: 1!important;
        transition: 2s;
    }
    .navigation{
        opacity: 0;
    }
    .nonactive {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
    <div class="container">
        <div class="header-container">
            <div class="button-open">
                <button id="OpenMobMenu">
                    <span>123</span><br>
                    <span>2</span><br>
                    <span>321</span><br>
                </button>
            </div>
            <div class="logo">
                <img src="image/logo.svg" alt="">
            </div>
            <div class="navigation">
                <nav class="nav-list">
                    <ul>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#products">Продукты</a></li>
                        <li><a href="#buy">Где купить</a></li>
                        <li><a href="#services">Сервисы</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
</body>

Если надо скрыть и больше не показывать, то вместо $('.button-open').toggleClass('nonactive'); используйте $('.button-open').addClass('nonactive');

Answer 2

наверное не оч понятно обьяснил. Вообщем сам сделал каким-то костылем походу.. но работает

 $('#OpenMobMenu').click(function() {
        $('body').toggleClass('active-menu');
        $(this).toggleClass('active');
        $('header .navigation').toggleClass('active');
    });

    $('header .nav-list ul a').click(function() {
        $('body').removeClass('active-menu');
        $(this).removeClass('active');
        $('header .navigation').removeClass('active');
        $('#OpenMobMenu').removeClass('active');
    });

БЛОГ НА HUSL

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

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