How to hide the mobile menu when clicking on the menu section - anchor?

Question

css

I have this menu script:

$(document).ready(function() {

  $(".toggle-mnu").click(function() {
    $(this).toggleClass("on");
    $(".top-nav").toggle();
    return false;
  });
});

Here is the html:

<div class="col-6 toogle-wrapper">
          <a href="#" class="toggle-mnu"><span></span></a>
        </div>
        <div class="top-nav col-6 col-sm-6 col-md-6 col-lg-8">
          <ul id="navigation" class="top-nav-menu">
            <li><a data-menuanchor="kak-eto-rabotaet" href="#kak-eto-rabotaet">Как это работает</a></li>
            <li><a data-menuanchor="uslugu" href="#uslugu">Услуги</a></li>
            <li><a data-menuanchor="marki-avto" href="#marki-avto">Стоимость</a></li>
            <li><a data-menuanchor="nashi-raboti" href="#nashi-raboti">Наши работы</a></li>
            <li><a data-menuanchor="voprosu" href="#voprosu">Вопросы</a></li>
            <li><a data-menuanchor="pochemy-mi" href="#pochemy-mi">Почему мы</a></li>
            <li><a data-menuanchor="contacti" href="#contacti">Контакты</a></li>
          </ul>

          

        </div>

The problem is that when I open the menu in a mobile browser, I click on the menu link, the page scrolls, but the menu itself does not close. What is the best way to implement this?
Tried like this:

jQuery(document).ready(function($) {
 $(".top-nav-menu li a").click(function (event) {
// check if window is small enough so dropdown is created
var toggle = $(".toggle-mnu").is(":visible");
if (toggle) {
$(".top-nav-menu").toggleClass("");
}
});
 });

But something doesn't work at all...

Answer 1

Try like this:

$('.здесь_id_меню li').click(function(){
  $('здесь_Id_меню_или_во_что_оно_оборачивается').hide(300);