How To Hide My Collapse Bootstrap 3 Navbar With Click On Body When, Collapse Is Visible?

I'm making a WordPress website for agency where I will go work. I used Bootstrap 3.0, and I created a responsive menu. How to hide menu when is collapsed and visible (2nd pic) wit

Solution 1:

This is a functional solution:

$(document).on('click touchstart', function (e) {
if ($(e.target).closest(".navbar-collapse").length === 0 && $(e.target).closest('[data-target=".navbar-collapse"]').length === 0) {
    $(".navbar-toggle").collapse('hide');
}
});

Solution 2:

Try This Example

<scripttype='text/javascript'>

    $(document).ready(function () {
        functionCloseNav() {
            $(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            $(".navbar-toggle").stop().removeClass('collapsed');
        }

        $('html').click(function (event) {
            var clickover = $(event.target);
            var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
            if (_opened === true && !clickover.hasClass("navbar-toggle")) {
                CloseNav();
            }

        });
    });

</script>

Update

you can change the html selector to whatever selector you want, body (if you have enough height), wrapper or whatever. A clean fiddle example here

Solution 3:

This works. It will close the collapsed navbar when touched anywhere on the mobile touchscreen.

$(document).on('touchend', 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');
    }
});

Solution 4:

Here is another approach which is working for me.

My scenario: I want to hide the collapsible when I click anywhere outside of a form which contains a dropdownlist.

  $(document).ready(function(){
      //check if collapsible is shown
      $(".collapse").on('shown.bs.collapse', function(){
        //then check if there was a click
        $(document).click(function(event) {
          //exclude the click was on the form if (!$(event.target).hasClass("input-default")) {
              //then hide it
              $(".collapse").collapse('hide');
          }
        });
      });
  });

Solution 5:

I think your best approach would be to do something in a mediaquery, or pherhaphs with js instead, check in bootstrap page which are the break points and use the one you are interested in.