Closing offcanvas menu on click outside

Question

I'm looking to adapt an offcanvas menu to close when the users clicks anywhere outwith the menu. I'm using the menu from the link below, which applies an '.offcanvas-expanded' class to bring the menu into the viewport via a css transition. As it stands, the menu can only be opened/closed by clicking the '.offcanvas-toggle' button.

Menu: http://slicejack.com/responsive-offcanvas-navigation-menu/

I'd like to be able to toggle this class when the user clicks anywhere on the page outwith the menu. I've attempted this with the following script (unsuccessfully), which caused the entire page to become a trigger for the css transition.

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

Could anyone offer some advice as to how I can achieve this?

UPDATE — Full answer via @Joffutt below:

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

The most easy way to do it in Bootstrap 5 is to fire the click event on the close button of the offcanvas like I did in code below. I like to use plain Javascript here because jQuery is out in Bootstrap 5.

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

Answer 2

Using the examples you have already provided, I have added in the functionality to not hide the offcanvas area when you specifically click on any of the links.

I added in a check inside of the on click method that specifically checks against the a-tags you have in the offcanvas area. If any of those match against the target of the click, it returns out of the method before toggling the style class.

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