Closing menu on anchor click?

Question

JavaScript

On this page in the mobile version, clicking on the menu items (anchors) does not close the menu. What to add to close?

<nav id="fh5co-menu-wrap" role="navigation">
            <ul class="sf-menu" id="fh5co-primary-menu">
                            <li class="active"><a href="tel:[phone]"><i class="icon-phone2"></i> [phone]</a></li>
                            <li><a class="smoothscroll anchor" href="index.html#1">Главная</a></li>
                            <li><a class="smoothscroll anchor" href="index.html#fh5co-features">Преимущества</a></li>
                             <li><a class="smoothscroll anchor" href="index.html#profils">Характеристики</a></li>
              <li><a class="smoothscroll anchor" href="index.html#profils1">Доставка и оплата</a></li>
            </ul>
          </nav>

// Offcanvas and cloning of the main menu
  var offcanvas = function() {

    var $clone = $('#fh5co-menu-wrap').clone();
    $clone.attr({
      'id' : 'offcanvas-menu'
    });
    $clone.find('> ul').attr({
      'class' : '',
      'id' : ''
    });

    $('#fh5co-page').prepend($clone);

    // click the burger
    $('.js-fh5co-nav-toggle').on('click', function(){

      if ( $('body').hasClass('fh5co-offcanvas') ) {
        $('body').removeClass('fh5co-offcanvas');
      } else {
        $('body').addClass('fh5co-offcanvas');
      }
      // event.preventDefault();

    });

    $('#offcanvas-menu').css('height', $(window).height());

    $(window).resize(function(){
      var w = $(window);


      $('#offcanvas-menu').css('height', w.height());

      if ( w.width() > 769 ) {
        if ( $('body').hasClass('fh5co-offcanvas') ) {
          $('body').removeClass('fh5co-offcanvas');
          
        }
      }

    });	

  }

  

  // Click outside of the Mobile Menu
  var mobileMenuOutsideClick = function() {
    $(document).click(function (e) {
      var container = $("#offcanvas-menu, .js-fh5co-nav-toggle");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ( $('body').hasClass('fh5co-offcanvas') ) {
        $('body').removeClass('fh5co-offcanvas');
      }
      }
    });
  };

Answer 1

Something is somehow too dofiga of everything in js and it's not very clear what and why. Too lazy to figure it out, so I will briefly describe how to do the same thing without javascript
You can wrap the anchors in a label with the for="#menu-toggle" attribute On the same level with the menu block that should be hidden place input type=checkbox id="menu-toggle" set its position to absolute, guard 0, z-index -1 Wrap
the burger with the same label, which should make the menu visible.
Well, for the default menu block, define styles so that it is hidden,
but when #menu-toggle:checked ~ .some-menu-block, define styles so that it is open.
Here https://jsfiddle.net/AntowaKartowa/b3ueU/ and here https://jsfiddle.net/AntowaKartowa/BcMVP/you can see how this approach works