How to hide the mobile menu after clicking on an item?

Question

User navigation

Guys, tell me such a moment who understands.
There is a one-page site where. navigation works on anchors.
The mobile menu opens, you select an item and move to it.
But the menu itself is not hidden.
How to hide the menu after selecting an item?
I admit right away I don’t understand js yet, I use a ready-made solution.
There is a block with a menu

<div class="menuToggle"><img src="images/menu-icon.png" alt="Меню"></div>
              <nav class="main-nav">
                <a class="main-nav__link nav-active" href="#about">Обо мне</a>
                <a class="main-nav__link" href="#add">Преимущеcтва</a>
                <a class="main-nav__link" href="#skills">Навыки</a>
                <a class="main-nav__link" href="#resume">Резюме</a>
                <a class="main-nav__link" href="#portfolio">Портфолио</a>
                <a class="main-nav__link" href="#services">Услуги</a>
                <a class="main-nav__link" href="#contacts">Контакты</a>
              </nav>
            </div>

And a script that works to show and hide the menu

$(function() {
    
   $('.menuToggle').on('click', function(){
      $('.main-nav').slideToggle(500, function(){
        if($(this).css('display') === 'none'){
          $(this).removeAttr('style');
        }
      });
    });
});