在外部单击时关闭画布菜单

Question

我希望调整一个画布菜单以在用户单击菜单外的任何位置时关闭。我正在使用下面链接中的菜单，它应用了一个“.offcanvas-expanded”类，通过 CSS 转换将菜单带入视口。就目前而言，菜单只能通过单击“.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

使用您已经提供的示例，我添加了在您专门单击任何链接时不隐藏画布区域的功能。

我在 on click 方法中添加了一个检查，专门检查您在画布区域中的 a-tags。如果其中任何一个与点击的目标匹配，它会在切换样式类之前从方法中返回。

$(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');
  }
});

body {
  overflow-x: hidden;
}
/*
 * Page wrap
 */

.page-wrap {
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.offcanvas-expanded .page-wrap {
  -webkit-transform: translateX(320px);
  -ms-transform: translateX(320px);
  transform: translateX(320px);
}
/*
 * Offcanvas
 */

.offcanvas {
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 5000;
  -webkit-transform: translateX(-320px);
  -ms-transform: translateX(-320px);
  transform: translateX(-320px);
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.offcanvas-expanded .offcanvas {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Adapted from http://slicejack.com/responsive-offcanvas-navigation-menu/ -->

<div class="page-wrap">
  <button class="offcanvas-toggle">Open offcanvas here</button>
  <h1>Simple HTML, LESS, jQuery responsive offcanvas navigation menu</h1>
  <p>This is simple offcanvas navigation menu build on HTML, LESS and jQuery. You can use it as a starter offcanvas template for your next project. If you want to see compiled version of LESS just click on <i>"View Compiled"</i> button in CSS section. In CSS
    there are comments that highlight what's important to include. There is a full tutorial on how to use this offcanvas navigation menu at slicejack.com/blog, just click on button bellow to read full article.</p>
  <a href="#" class="btn">Read more on Slicejack.com</a>
</div>
<!-- /.page wrap -->

<div class="offcanvas">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Twitter</a>
    </li>
  </ul>
</div>
<!-- /.offcanvas -->

Answer 2

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

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