How to hide my collapse bootstrap 3 navbar with click on body when, collapse is visible?

Question

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) with click on body, and menu button change it color only collapse is visible?

bootstrap.js and jquery is connected in my footer.

score 4 · Answer 1 · edited Feb 08 '16 at 14:49

4

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

edited Feb 08 '16 at 14:49

Frederik Struck-Schøning

12,981
8
59
68

answered Oct 20 '15 at 23:57

Marapet

41
1

hsobhy · Accepted Answer · 2014-01-21T08:32:48.123

3

Try This Example

<script type='text/javascript'>

    $(document).ready(function () {
        function CloseNav() {
            $(".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

edited Jan 21 '14 at 08:32

answered Jan 20 '14 at 18:04

hsobhy

1,493
2
21
35

sure it works .. I have a bootstrap site working on it and had the same problem .. please check again .. the code need jQuery – hsobhy Jan 20 '14 at 18:11
I have a jQuery and bootstrap.js linked in my footer. My js skills is very pover. – user3216077 Jan 20 '14 at 18:16
you can change the html selector to whatever selector you want, body (if you have enough height), wrapper or whatever. – hsobhy Jan 20 '14 at 18:35
"I have a jQuery and bootstrap.js linked in my footer" you will need to add this function after the jQuery in a script tag and you may place the jquery in the header BTW. – hsobhy Jan 20 '14 at 18:48
I added my function in a tags – user3216077 Jan 20 '14 at 18:57
do you have firefox? can you inspect the element you click on to test (the white space and tray changing the ('html') to body or main div in your site .. will add the code in tag above – hsobhy Jan 20 '14 at 19:00
:) A last question , is it working for your in my example? if so just copy all you page code and paste in new Fiddle – hsobhy Jan 20 '14 at 19:14
No, because I use wordpress. – user3216077 Jan 20 '14 at 19:17
you may just view source and copy the code dude :) .. good luck then – hsobhy Jan 20 '14 at 19:18
Your html code, with function in my page works. I´ll go develop a new nav-bar based based on that. Thank you one more time. Cheers :) – user3216077 Jan 20 '14 at 19:37
I did everything working, but there is a problem. When click the button to close the collapse, it closes and opens again. I verify that it happens in your example. You know what can be? – user3216077 Jan 21 '14 at 01:31
Yes got that and fixed it, updated here above and in jsfiddle ... http://jsfiddle.net/Hg4Ts/3/ – hsobhy Jan 21 '14 at 08:34
fiddle example seem not show a good solution, it closes on clicking on the "dropdown" item, so there is no way to select sub-item of the dropdown menu – Hiep Aug 16 '15 at 23:48
this is because all items have # in its href att. – hsobhy Aug 19 '15 at 12:22

score 1 · Answer 3 · answered Nov 16 '16 at 14:20

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

score 1 · Answer 4 · answered May 04 '17 at 10:21

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

score 0 · Answer 5 · answered Jan 20 '14 at 17:43

0

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.

answered Jan 20 '14 at 17:43

Santiago Rebella

2,399
2
22
29

Thanks. But I need a jQuery function for this. – user3216077 Jan 20 '14 at 18:04

score 0 · Answer 6 · answered Aug 12 '16 at 09:12

You don't want to listen for the click all the time that is so wrong. you have to bind and unbind based on the navbar status. here is my navbar-colapse and it's id is 'z', and when it is open i will listen for clicks and when it's closed i don't listen anymore. i will put comment on the code:

    //CALLBACK AFTER NAVBAR-COLLAPSE OPEN
    $('#z').on('shown.bs.collapse', function () {
        // HERE WE BIND THE CLICK TO THE HANDLER FUNCTION
        $(document).bind( "click", handler );
    })
    //CALLBACK AFTER NAVBAR-COLLAPSE CLOSE
    $('#z').on('hidden.bs.collapse', function () {
        // SINCE THE NAVBAR IS CLOSED WE DONT NEED TO LISTEN FOR CLICKS           ANYMORE
        $(document).unbind( "click", handler );
    })
    //THIS IS THE FUNCTION THAT GET FIRED
    var handler = function() {
        //LISTEN FOR CLICKS
        $(document).click(function(event) {
            //HERE FORM-CONTROL IS MY SEARCH BOX IN THE NAV SO I DONT WANT TO CLOSE
            //THE NAVBAAR IF THEY CLICK ON FONT-CONTROL, BUT ANYTHING BESIDE THAT WE CLOSE THE NAVBAR
            if (!$(event.target).hasClass("form-control")) {
                $('#z').collapse('hide');
            }
        });
    };

Also here is my nav-bar code :)

            <nav class="navbar navbar-default my-nav" data-spy="affix" id="nav" style="margin-bottom: 0">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#z" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">-</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="z">
                    <div class="navbar-form navbar-left my-navbar-left" role="search">
                        <div class="form-group">
                          <input id="searchbar" type="text" class="form-control" placeholder="Search for ads">
                        </div>
                    </div>
                    <ul class="nav navbar-nav navbar-right my-navbar-right">
                        <li><a class="tab-c tab-home"> <span class="text-to-icon">Posts</span> </a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

score 0 · Answer 7 · answered Oct 19 '19 at 17:43

0

$('.collapse').collapse('hide');

answered Oct 19 '19 at 17:43

Konstantin XFlash Stratigenas

605
6
10

How to hide my collapse bootstrap 3 navbar with click on body when, collapse is visible?

7 Answers7

Update

Here is another approach which is working for me.

Linked