How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

by

Have a look that:

$(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")) {
            $("button.navbar-toggle").click();
        }
    });
});

Your fiddle works with that: http://jsfiddle.net/52VtD/5718/

Its a modified version of this answer, which lacks the animation and is also a tiny bit more complicated.

I know, invoking the click() isn’t very elegant, but collapse('hide') did not work for me either, and i think the animation is a bit nicer than adding and removing the classes hardly.

More Related Contents:

  1. How to Bootstrap navbar static to fixed on scroll?
  2. How to change the colour of a scrollbar on a web page? [closed]
  3. Does any budy know how to reproduce this hover effect on this page? [closed]
  4. JQuery change CSS style of table cells which contain disabled elements [closed]
  5. How to have html popup appear over main html page?
  6. Css set size of elements in array dynamically [closed]
  7. Write tags in HTML and print
  8. Change from (+) symbol to (-) after click (function(){
  9. How can i create html automatic change page? [duplicate]
  10. How to disable HTML links
  11. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  12. Refresh/reload the content in Div using jquery/ajax
  13. Animate element to auto height with jQuery
  14. How to style “input file” with CSS3 / Javascript? [duplicate]
  15. Dashed border animation in css3 animation
  16. :touch CSS pseudo-class or something similar?
  17. CSS3-Animate elements if visible in viewport (Page Scroll)
  18. Open a new javascript window(.open) along with its CSS styling
  19. How to create a responsive image that also scales up in Bootstrap 3
  20. Check if element is between 30% and 60% of the viewport
  21. How do I make a move up and down when I’m scrolling the page?
  22. Fade background image in and out with jQuery?
  23. How do I detect the inherited background-color of an element using jQuery/JS?
  24. Convert dropdown to selection boxes with color and trigger drop down action
  25. Rotate div text after clicking on button using jquery and css
  26. How to use pagination on HTML tables?
  27. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  28. Bootstrap and jQueryUI Conflict
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment