How can I close my bootstrap 4 navbar collapse menu when clicking outside the menu?

Question

This navbar is collapsed for all browser sizes. I'm wondering how to be able to close the expanded menu when clicking outside the menu. So that the toggle button isn't the only way to close it.

I have tried a few recommendations for Bootstrap 3, one of them being the Javascript code included below, but they don't seem to be working.

It's probably useful to say that I don't know Javascript or PHP very well, but I'm open to whatever suggestions you have. Thanks!

<nav class="navbar navbar-inverse bg-faded">
              <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <span class="navbar-text">&nbsp;</span>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav flex-column">
                  <li class="nav-item active">
                    <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/support-2/">Support</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Legal
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a>
                      <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>

            <script>
            $(document).click(function (event) {
                var clickover = $(event.target);
                var $navbar = $(".navbar-collapse");               
                var _opened = $navbar.hasClass("in");
                if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
                    $navbar.collapse('hide');
                }
            });
            </script>

Answer 1

The following jQuery code worked fine for me:

// Close Navbar when clicked outside
$(window).on('click', function(event){
    // element over which click was made
    var clickOver = $(event.target)
    if ($('.navbar .navbar-toggler').attr('aria-expanded') == 'true' && clickOver.closest('.navbar').length === 0) {
        // Click on navbar toggler button
        $('button[aria-expanded="true"]').click();
    }
});

Explanation:

If aria-expanded attribute of navbar-toggler button is false, i.e., navbar is collapsed, nothing is to be done.

If aria-expanded attribute of navbar-toggler button is true, then before closing the navbar, we must check if the click was made over the navbar or outside it which can be easily verified by checking if any ancestor of the click-target contains navbar class or not.

If any ancestor of the click-target element (element over which click was made) contains navbar class, then clickOver.closest('.navbar').length will return 1 else it will return 0.

So, if aria-expanded attribute of navbar-toggler button is true (navbar is not collapsed) and clickOver.closest('.navbar').length returns 0 (click-target element has no ancestor with navbar class), collapse the navbar by clicking on the navbar-toggler button else, do nothing.

Answer 2

If you are using Bootstrap 4, Try this JQuery

instead of hiding apply click on toggler $(".navbar-toggler").click(); and replace in with show class and navbar-toggle with navbar-toggler

 $(document).ready(function () {
     $(document).click(function (event) {
         var clickover = $(event.target);
         var _opened = $(".navbar-collapse").hasClass("show");
         if (_opened === true && !clickover.hasClass("navbar-toggler")) {
             $(".navbar-toggler").click();
         }
     });
 });

Working fiddle : https://jsfiddle.net/rg43fyhL/

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("show");
        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
            $(".navbar-toggler").click();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse bg-faded">
              <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <span class="navbar-text">&nbsp;</span>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav flex-column">
                  <li class="nav-item active">
                    <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/support-2/">Support</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Legal
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a>
                      <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>