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

关闭菜单图标和外面的汉堡包菜单

1 个答案: