关闭菜单图标和外部的汉堡菜单

Question

How can I close the hamburger menu on outside if it's been clicked on overlay. I'm still new to js and here's my code. Right now its just working when closing the hamburger icon. I'm practicing but I can't seem to make it work.

$(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

Add an event listener to the whole document to close the menu if it's open.

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;
});