Javascript 链接单击后，锚定菜单关闭

我有一个满是锚链接的菜单，我从：-我的代码看起来像：

<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>

$(document).ready(function() {
    $('#cnt__nav-trigger, .cnt__nav').click(function() {
        $('.nav-trigger').toggleClass('is-open');
        $('.cnt__nav').toggleClass('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");
    }
});

我猜平滑滚动中的

单击

函数正在覆盖链接的行为，导致

$（'.cnt_uunav 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");
        }
    });
}

$（文档）.ready（函数（）{
$（'#cnt_uunav-trigger、.cnt_unav、.cnt_unav a'）。单击（函数（）{
$（'.nav trigger'）.toggleClass（'is-open'）；
$（'.cnt_uunav'）.toggleClass（'is-open'）；
$（'.cnt_uunav a'）.toggleClass（'is-open'）；
});
});
$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
//平滑卷轴
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
var target=this.hash，
菜单=目标；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top+2
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'.cnt_uunav a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'.cnt_unav ul li a'）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}

当前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小提琴：

谢谢，

Josh
当@UmurDinçer在写一个解决方案时，我想出了一个自己的解决方案

删除
$（'.cnt_uunav a'）.toggleClass（'is-open'），看起来像：

<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>

$(document).ready(function() {
    $('#cnt__nav-trigger, .cnt__nav').click(function() {
        $('.nav-trigger').toggleClass('is-open');
        $('.cnt__nav').toggleClass('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");
    }
});

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

<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>

$(document).ready(function() {
    $('#cnt__nav-trigger, .cnt__nav').click(function() {
        $('.nav-trigger').toggleClass('is-open');
        $('.cnt__nav').toggleClass('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");
    }
});

$（'.cnt\uu nav a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'.cnt_uunav a'）.removeClass（“处于打开活动状态”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});

这解决了这个问题，因为它正在删除
is open
类，这会导致菜单关闭。
@UmurDinçer想出了解决方案…只需从选择器中删除
.cnt_unav
。在这里发布它，以便我可以选择它作为答案。
我的第一个想法是，您有冲突的绑定。使用选择器
'#cnt_uunav-trigger、.cnt_unav、.cnt_unav a'
，第三个选择器是第二个选择器的子选择器。因此，逻辑将处理对a元素的点击，切换类，然后点击事件将冒泡到父级，父级将处理点击，并将其切换回。does
$（'.nav trigger'）。toggleClass（'is-open'）和
$（'.cnt_uunav a'）。切换类（'is-open'）必要吗？我把它们取下来了，我觉得很好。检查这把小提琴：@UmurDinçer
$（'.nav trigger'）.toggleClass（'is-open'）
将三行更改为X和
$（'.cnt_uunav a'）。toggleClass（'is-open'）
是我在单击链接时试图用来关闭菜单的内容。在我添加平滑滚动之前，此功能一直有效。@Josh Rodgers我明白了，只需从选择器中删除
.cnt\uu nav
。检查我更新的提琴：@UmurDinçer有一个有效的解决方案，并且是公认的答案，就在这里发布这个，所以如果其他人需要做类似的事情。