如何在用户单击 link 时关闭响应式全屏菜单？

Question

我的单页网站上有一个响应式菜单，当单击汉堡包图标时，它会显示一个透明的全屏菜单。当用户单击右上角的关闭按钮 (X) 时，全屏菜单会关闭，因此一切正常。但是由于我的大部分站点都是一页的，所以菜单中的所有 link 也在同一页面中 link。当用户单击其中一个 links 时，页面会按预期跳转到那里，但透明的全屏菜单仍然保持全屏状态...

当用户单击 link 时，菜单应该会消失，就像用户单击关闭按钮时一样。这是我要解决的问题，我确信它只需要几行 Javascript 但我对 JS 不是很流利。

这是网站：

http://www.artegradesign.com

这是相关代码（可能还有更多，不确定）：

HTML

<div class="menu-btn"></div>
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

CSS

.menu-btn {
cursor: pointer;
height: 60px;
width: 60px;
display: inline;
z-index: 99;
position: absolute;
top: 2px;
right: 5%;
}
.close-btn {
position: fixed;
z-index: 100;
}
nav {
position: fixed;
top: -1600px;
left: 0;
right: 0;
background-color: rgba(0,26,51,0.95);
transition: all 0.5s;
color: white;
min-height: 100%;
z-index: 99;
}
.open {
top: 0;
}

JS

$(document).ready(function(){
$('.menu-btn').click(function(){
    $('nav').toggleClass('open');
    $(this).toggleClass('close-btn');
    $('.container').toggle();
})
})

更新：当我点击 link 时，我设法关闭了全屏菜单（使用下面的 js），但它也使菜单按钮完全消失。所以我还是需要一个英雄来把它带回来！

$(document).ready(function(){
    $('nav li a').click(function(){
        $('nav').toggle();
    })
})

谢谢！

Answer 1

点击事件的处理方式似乎不太理想，但是因为您只是在点击它时寻找切换（用于关闭和打开），所以您可以将 link 点击与像这样触发菜单点击：

$('nav li a').on('click', function(){
    $('.menu-btn').trigger('click');
});

不过，我确实建议为您的导航使用 ID 或特定的 class。如果您在网站的其他任何地方添加一个带有无序 link 列表的导航元素，它很容易崩溃。

如何在用户单击 link 时关闭响应式全屏菜单？

How to close responsive fullscreen menu when user clicks on a link?

html

javascript

menu

fullscreen

responsive-design