Закрытие меню при клике на ссылку
Помогите пожалуйста разобраться с меню. Нужно что бы при клике на якорное меню (Landing page) в мобилке меню закрывалось. Сейчас меню переводит по якорям на странице , но не закрывается при клике.Сейчас только изучаю js, но пока очень плохо в нем разбираюсь, спасибо за помощь!
<header class="site-navbar py-3" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-10 col-xl-2">
<h1 class="mb-0"><a class="logo-header h2 mb-0" href="index.html">лого</a></h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
<li class="active">
<a href="#">Текст</a>
</li>
<li>
<a href="#">Текст</a>
</li>
<li>
<a href="#">Текст</a>
</li>
<li>
<a href="#">Текст</a>
</li>
<li class="">
<a class="btn-custom" href="#">Заказать звонок</a>
</li>
</ul>
</nav>
</div>
<div class="d-inline-block d-xl-none ml-md-0 mr-auto py-3" style="position: relative; top: 3px;">
<a class="site-menu-toggle js-menu-toggle text-white" href="#"><span class="icon-menu h3"></span></a>
</div>
</div>
</div>
Query(document).ready(function($) {
"use strict";
var siteMenuClone = function() {
$('.js-clone-nav').each(function() {
var $this = $(this);
$this.clone().attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
});
setTimeout(function() {
var counter = 0;
$('.site-mobile-menu .has-children').each(function(){
var $this = $(this);
$this.prepend('<span class="arrow-collapse collapsed">');
$this.find('.arrow-collapse').attr({
'data-toggle' : 'collapse',
'data-target' : '#collapseItem' + counter,
});
$this.find('> ul').attr({
'class' : 'collapse',
'id' : 'collapseItem' + counter,
});
counter++;
});
}, 1000);
$('body').on('click', '.arrow-collapse', function(e) {
var $this = $(this);
if ( $this.closest('li').find('.collapse').hasClass('show') ) {
$this.removeClass('active');
} else {
$this.addClass('active');
}
e.preventDefault();
});
$(window).resize(function() {
var $this = $(this),
w = $this.width();
if ( w > 768 ) {
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
}
}
})
$('body').on('click', '.js-menu-toggle', function(e) {
var $this = $(this);
e.preventDefault();
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
$this.removeClass('active');
} else {
$('body').addClass('offcanvas-menu');
$this.addClass('active');
}
})
// click outisde offcanvas
$(document).mouseup(function(e) {
var container = $(".site-mobile-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
}
}
});
};
siteMenuClone();
var sitePlusMinus = function() {
$('.js-btn-minus').on('click', function(e){
e.preventDefault();
if ( $(this).closest('.input-group').find('.form-control').val() != 0 ) {
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
} else {
$(this).closest('.input-group').find('.form-control').val(parseInt(0));
}
});
$('.js-btn-plus').on('click', function(e){
e.preventDefault();
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) + 1);
});
};