锚点菜单在链接单击后关闭

Question

我有一个充满锚链接的菜单，我从： https://codepen.io/jpag82/pen/jAZjvV - 我的代码看起来像：

<div class="cnt__nav">
<nav>
<ul>
<li><a href="#head" class="active">Home</a></li>
<li><a href="#main">About</a></li>
<li><a href="#foot">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>

我将这个菜单与一个流畅的滚动脚本结合起来，我从：https://jsfiddle.net/cse_tushar/Dxtyu/141/

这两个脚本都可以工作，除了使用锚链接外，我没有碰过这两个脚本。我想做的是在单击菜单项时关闭菜单或运行toggleClass('is-open')。

我在 JS 中添加了一行我认为可以工作的行，但是当我添加平滑滚动时，此功能停止工作(仅在.cnt__nav a选择器上(：

$(document).ready(function() {
$('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() {
$('.nav-trigger').toggleClass('is-open');
$('.cnt__nav').toggleClass('is-open');
$('.cnt__nav a').toggleClass('is-open');
});
});

我猜平滑滚动中的click函数正在覆盖链接的行为，导致$('.cnt__nav a').toggleClass('is-open');停止工作。

有没有办法将这两个脚本网格化在一起，以便在单击链接时关闭菜单？

当前的JS：

$(document).ready(function() {
$('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() {
$('.nav-trigger').toggleClass('is-open');
$('.cnt__nav').toggleClass('is-open');
$('.cnt__nav a').toggleClass('is-open');
});
});


$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.cnt__nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.cnt__nav ul li a').removeClass("active");
currLink.addClass("active");
}
else {
currLink.removeClass("active");
}
});
}

当前的 HTML：

<!-- MENU -->
<div class="cnt__nav">
<nav>
<ul>
<li><a href="#head" class="active">Home</a></li>
<li><a href="#main">About</a></li>
<li><a href="#foot">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- NAV TRIGGER -->
<div id="cnt__nav-trigger">
<div class="nav-trigger">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

JS小提琴：https://jsfiddle.net/1s7qfp9c/

谢谢，
乔希

Answer 1

@UmurDinçer编写解决方案时，我想出了自己的解决方案...

删除$('.cnt__nav a').toggleClass('is-open');，如下所示：

$(document).ready(function() {
$('#cnt__nav-trigger, .cnt__nav').click(function() {
$('.nav-trigger').toggleClass('is-open');
$('.cnt__nav').toggleClass('is-open');
});
});

然后我修改了 JS，在第 5 行，我告诉它删除is-open类 - 看起来像：

$('.cnt__nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.cnt__nav a').removeClass("is-open active");
currLink.addClass("active");
}
else {
currLink.removeClass("active");
}
});

这修复了此问题，因为它删除了导致菜单关闭的is-open类。

Answer 2

@UmurDinçer想出了解决方案...只需从选择器中删除.cnt__nav即可。将其发布在这里，以便我可以选择它作为答案。