锚标记上的ToggleClass但链接不起作用

Question

我（我想）有一个非常简单的问题，但我自己找不到解决方案。

我有一个带有几个菜单项的叠加菜单，一个取消按钮，您也可以通过点击导航元素外部来退出菜单。问题是，在添加适当的jQuery代码以删除某些类并使菜单不可见之后，菜单会按预期消失，锚标记似乎不起作用（菜单项）......

这些链接表示同一页面的相应部分（在同一HTML中），当您点击某个li时，它会将您分配给它，例如博客，有html：

<div id="blog"> ... </div>

菜单HTML：

<div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display" role="navigation">
        <ul>
            <li><a class="activable" href="#diamond-row"> Photos </a></li>
            <li><a href="#blog" class="activable"> Blog </a></li>
            <li><a href="#contact" class="activable"> Contact </a></li>
        </ul>
    </nav>
</div>

jQuery的：

$('#close-btn, a.activable').click(function() {
        $('.nav-container').toggleClass('active');
        $('.cover').toggleClass('active-cover');
        $('.scroll-down').toggleClass('hidden');
        return false;
    });

    $(document).on("click", "div:not('.nav-container')",function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
    $('.scroll-down').removeClass('hidden');
});

CSS：

.active {
    position: fixed;
    opacity: 1;
    visibility: visible;
    transition: all 300ms linear;
}

.cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    height: 100%;
    width: 100%;
}

.active-cover {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}