title: How do I outside-click-to-close this custom offcanvas nav from bootstrap's docs?
body: <p>I'm using the offcanvas experiment code from Bootstrap 4 documentation, but it's not designed to close when you click outside the menu, which is something I would really like it to do. </p>
  
  <p>I've tried several of the jquery snippets around the web, but they utilize bootstrap's .collapse and don't work when I edit them to contain the custom .offcanvas-collapse class. </p>
  
  <pre><code>&lt;nav class="navbar fixed-top navbar-dark bg-dark"&gt;
        &lt;button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" data-target="#offcanvasNav" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;i data-feather="menu"&gt;&lt;/i&gt;
            &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Sleight of Word&lt;/a&gt;
              &lt;button class="navbar-toggler p-0 border-0" type="button" data-toggle="searchBar"&gt;
                &lt;i data-feather="search"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;form class="form-inline my-2 my-lg-0 d-none"&gt;
                &lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"&gt;
                &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
  
            &lt;div class="navbar-collapse offcanvas-collapse" id="offcanvasNav"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Dashboard &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Notifications&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Switch account&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Settings&lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="dropdown01"&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class="form-inline my-2 my-lg-0"&gt;
                &lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"&gt;
                &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
  
  .offcanvas-collapse {
      position: fixed;
      top: 56px; /* Height of navbar */
      bottom: 0;
      right: 100%;
      width: 240px;
      padding-right: 1rem;
      padding-left: 1rem;
      overflow-y: auto;
      visibility: hidden;
      background-color: purple;
      transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out, visibility .2s ease-in-out;
      transition: transform .2s ease-in-out, visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
    }
  
    .offcanvas-collapse.open {
      visibility: visible;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  
  
  $(function () {
    'use strict'
  
    $('[data-toggle="offcanvas"]').on('click', function () {
      $('.offcanvas-collapse').toggleClass('open')
    })
  })
  
  $(document).on('click',function(){
      $('.offcanvas-collapse').offcanvas-collapse('hide');
  })
  </code></pre>
  
  <p>I was hoping that this would make the offcanvas nav toggleable (open and close) with the menu button and make the nav close when click outside the menu, but clicking outside the nav does nothing. </p>