The provided solution does not seem to be functioning properly. In order to ensure it works correctly, we simply need to verify if the "navbar-collapse" class includes the "in" class. If this condition is met, we can proceed to trigger the collapse method by referencing the navbar element.

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

This solution has proven to be effective for me.

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});

After reviewing various solutions, I found the perfect one in the top-rated answer here and also in this particular response

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

This script automatically closes an expanded navigation menu when the user clicks anywhere outside of the .navbar section. Additionally, clicking on .navbar-toggle still functions to close the menu as well.

Here is a customized version of the nozzleman's solution for Bootstrap 4(.3.1):

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

Implemented within the ngOnInit() function.

This script, executed when the document is fully loaded, listens for click events. It checks if the mobile menu dropdown is currently open (signified by the presence of the "show" class on the collapsible navbar section) and confirms that the clicked element (target) is not the mobile menu button (lacking the "navbar-toggler" class). If both conditions are met, it simulates a click on the mobile menu button to close the menu.

Instead of simply using stopPropagation(), a better alternative is to implement the following approach:

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Do not use return false

    // Conceal the navbar
});

In my opinion, it's risky to assume that you will never need to handle any other event related to the .navbar. This assumption is unrealistic when using stopPropagation().

I encountered a situation where I needed to prevent the accidental closure of a panel when clicking on plain text. Unlike other solutions, my approach ensures that the panel does not close if you click on non-link text.

To achieve this, I enhanced Paul Tarr's solution by incorporating a check to determine if the click occurred within the designated area:

if ($(event.target).parents(".navbar-collapse").length < 1) { }

The revised code snippet is as follows:

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

You can test this functionality in action through this demo fiddle, which demonstrates how clicking on non-link elements inside the panel will not result in its collapse.

Pure Vanilla Javascript.

Currently implementing Bootstrap version 5.2.

window.onload = function () {
    document.addEventListener("click", function (event) {
        // Check if the clicked element is not a child of the navbar, then close it if it is open
        if (!event.target.closest("#navbar_id") && document.getElementById("navbarSupportedContent").classList.contains("show")) {
            document.getElementById("hamburger_menu_button").click();
        }
    });
}

https://jsfiddle.net/j4tgpbxz/

Simply add an id to your navbar element and ensure that the clicked element is a child of the navbar while the dropdown content is visible in order to hide it.

Here is the correct response for the latest version of Bootstrap.

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

This code checks if .navbar-collapse contains the class "show" (indicating that the menu is open) and then hides the navbar when clicking/tapping anywhere on the screen.

I have made a modification to @nozzleman's solution by including a condition that checks if the user has clicked on any element within the menu. If so, the menu will not collapse.

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});

This snippet of code has proven to be effective for me, especially because it ensures that the .collapse element remains visible on smaller screens. It cleverly toggles the .navbar-toggler when clicking outside the nav parent with .navbar .navbar-expand classes:

$(document).click(function (e) {  
    if($('.collapse').hasClass('show') && !$('nav').is(e.target) && $('nav').has(e.target).length === 0){
        $('.navbar-toggler').click()
    }
})

Provided below is a snippet of code for Bootstrap 5 that includes functionality for hiding navigation bar when scrolling. It is designed to work seamlessly without the need for any adjustments, assuming there is only one navbar present on the webpage.

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        const navbarToggler = document.querySelector(".navbar-toggler");

        // Extract collapse content from data-bs-target attribute on the menu toggle button.
        const navbarCollapse = document.querySelector(
            navbarToggler.dataset.bsTarget
        );

        function hideMenu() {
            if (navbarCollapse.classList.contains("show"))
                navbarToggler.click();
        }

        document.addEventListener("click", function () {
            hideMenu();
        });

        document.addEventListener("scroll", function () {
            hideMenu();
        });
    });
</script>

Utilizing Bootstrap 4

One thing to note about Bootstrap 4 is the absence of an in class. The code snippet provided here is written in Coffeescript.

   $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

In essence, if you don't click on the button or the menu, the menu will close automatically.

It's interesting to observe that on iOS, clicking on text does not trigger a click event or mouseup event. However, events are fired when clicking on images.

When using Bootstrap 4:

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});

$(document).on('click', function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').trigger('click');
    }
});

$(document).on('click', function (event) {
     if ($(event.target).closest('.custom-dropdown').length) {
         return;
     }
     if ($(event.target).closest(offCanvasMenu).length) {
         return;
     }

     // ensure that the menu is open before closing
     if ($('.hamburger').hasClass("active")) {
         closeTheMenu();
     }

     $(dimBackgroundOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});

After encountering some issues with the answers provided, I took it upon myself to find a solution that would allow me to close the expanded menu whenever I wanted. By creating a simple function and utilizing a click simulation, I was able to achieve this.

function hideMenu(){
  var element = document.getElementById('nav_top');
  if(element){
    if(element.classList.contains('show')){
      document.getElementById('navbar_toggler').dispatchEvent(new CustomEvent('click'));
    }
  }
}
$(document).ready(function () {
  $(document).click(function (event) {
    hideMenu();
  });
});

This approach not only enables you to close the menu by clicking outside of it, but also allows you to invoke the hideMenu() function at any point from within your code.

Sorry for the delay in providing this answer, but I believe it will be helpful.

For instance, let's consider a scenario where the user wants to close the navigation bar by clicking outside of it, but not when clicking on any element inside the navigation bar.

To achieve this, you can use the event.target to target the closest element with a classname that either has or does not have the navbar class. If it does have the class, it indicates that the user is clicking inside the navbar and does not intend to close it.

$(function() {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse collapse show");
        if (_opened === true && clickover.closest('.navbar').length === 0) {
            $(".navbar-collapse").collapse('hide');
        }
    });
});