javascript - 单击外部关闭 Canvas 菜单

Question

我正在寻找调整 Canvas 菜单，以便在用户单击菜单外的任何位置时关闭。我正在使用下面链接中的菜单，它应用“.offcanvas-expanded”类通过 css 转换将菜单带入视口(viewport)。目前，只能通过单击“.offcanvas-toggle”按钮打开/关闭菜单。

菜单:http://slicejack.com/responsive-offcanvas-navigation-menu/

我希望能够在用户单击页面上菜单以外的任意位置时切换此类。我已经尝试使用以下脚本(未成功)，这导致整个页面成为 css 转换的触发器。

https://jsfiddle.net/graemebryson/onz7xspq/

jQuery(function( $ ){
  $('.offcanvas-toggle').on('click', function() {
    $('body').toggleClass('offcanvas-expanded');
  });

  $(document).click (function (e) {
    if ( (e.target != $('.offcanvas')[0] ) && ( $('body').hasClass('offcanvas-expanded')) ) {
      $('body').toggleClass('offcanvas-expanded');
    }
  });
});

有人可以就如何实现这一点提供一些建议吗？

更新 — 以下来自@Joffutt 的完整答案:

https://jsfiddle.net/graemebryson/97zdfwvf/

$(document).ready(function() {
  $('.offcanvas-toggle').on('click', function() {
    $('body').toggleClass('offcanvas-expanded');
  });
});
$(document).click(function(e) {
  if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) {
    var li_tags = $($('.offcanvas')[0]).find('li');
    var a_tags = $($('.offcanvas')[0]).find('a');
    for (var i = 0; i < li_tags.length; i++) {
      if (e.target == li_tags[i] || e.target == a_tags[i]) {
        return;
      }
    }
    $('body').toggleClass('offcanvas-expanded');
  }
});

Answer 1

在 Bootstrap 5 中最简单的方法是在 offcanvas 的关闭按钮上触发点击事件，就像我在下面的代码中所做的那样。我喜欢在这里使用纯 Javascript，因为 jQuery 在 Bootstrap 5 中已经过时了。

// close canvas
let closeCanvas = document.querySelector('[data-bs-dismiss="offcanvas"]');
closeCanvas.click();