關閉菜單圖標和外部的漢堡菜單

Question

如果在疊加層上單擊，如何關閉外部的漢堡菜單。 我對JS還是很陌生，這是我的代碼。 現在，它僅在關閉漢堡圖標時起作用。 我正在練習，但似乎無法正常工作。

$(document).ready(function () {
    var trigger = $('.hamburger'),
        overlay = $('.overlay'),
        isClosed = false;

    trigger.click(function () {
        hamburger_cross();

    });

    function hamburger_cross() {

        if (isClosed == true) {          
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
        } else {   
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
        }
    }

    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
    });  
}); 

Answer 1

將事件偵聽器添加到整個文檔以關閉菜單（如果打開的話）。

document.body.addEventListener('click', (e) => {
  if (!isClosed || e.target.matches('.hamburger, .hamburger *')) return;

  // better to put this in its own function for DRY code
  overlay.hide();
  trigger.removeClass('is-open');
  trigger.addClass('is-closed');
  isClosed = false;
});