jquery - 如何通过单击屏幕上的空白点来关闭汉堡菜单？ (类 : overlay-burger)

Question

我必须将哪个代码添加到 JS，才能通过单击空白处关闭汉堡菜单？

<div class="main-header">
    <div class="hamburger-menu">
        <a href="#" class="menu-btn">
            <span></span>
        </a>
        <nav class="links-menu">
            <a href="" class="nav-point">About</a>
            <a href="" class="nav-point">Services</a>
            <a href="" class="nav-point">Calculator</a>
            <a href="" class="nav-point">News</a>
            <a href="" class="nav-point">Contact</a>
        </nav>
        <div class="overlay-burger"></div>
    </div>
</div>

JS:

$('.menu-btn').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('menu-btn-active');
    $('.links-menu').toggleClass('links-menu-active');
});

Answer 1

如果用户没有点击按钮，则删除事件类:

window.onclick = function(event) {
  if (!event.target.matches('.menu-btn')) { 
    $('.links-menu').removeClass('links-menu-active'); // remove active class from the nav
    $('.menu-btn').removeClass('menu-btn-active'); // remove active class from button
  }
}