用戶單擊鏈接時如何關閉響應式全屏菜單？

Question

我的單頁網站上有這些響應菜單之一，當單擊漢堡包圖標時，該菜單會彈出一個透明的全屏菜單。 當用戶單擊右上角的關閉按鈕（X）時，全屏菜單關閉，因此一切正常。 但是由於我的網站大部分是一頁，所以菜單中的所有鏈接也是同一頁面內的鏈接。 當用戶單擊這些鏈接之一時，頁面會按預期跳到該位置，但是透明的全屏菜單仍然保持全屏狀態。

用戶單擊鏈接時，菜單應該完全消失，就像用戶單擊關閉按鈕時一樣。 這是我要解決的問題，我確定它只需要幾行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();
})
})

更新：單擊鏈接時，我設法關閉了全屏菜單（使用下面的js），但這也使菜單按鈕完全消失了。 所以我仍然需要一個英雄來把它帶回來！

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

謝謝！

Answer 1

單擊事件的處理方式似乎不太理想，但是由於單擊時只是在尋找一個切換（用於關閉和打開），因此可以將鏈接單擊與觸發菜單單擊綁定在一起，如下所示：

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

我確實建議為您的導航使用ID或特定的類。 如果您在站點的其他任何地方添加了帶有無序鏈接列表的nav元素，則很容易中斷。