4

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>
CADesigner
  • 49
  • 1
  • 1
  • 3

4 Answers4

5

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>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24
  • Hmm Doesn't seem to be working for me, but it might be how I'm including the script. I've wrapped the Javascript in – CADesigner Oct 16 '17 at 19:20
  • Add your css and js as above and test – Znaneswar Oct 17 '17 at 06:28
  • Strange as it's working in the fiddle but not on the website. Have tried caching and refreshing. It's got to be how I'm including the javascript. Right now it's in between – CADesigner Oct 18 '17 at 20:39
  • Thank you for posting. This option worked great for me. – createscape Feb 07 '19 at 19:36
  • This allows to click on the "open-space" within the .collapse and still closes it, which is just pointless.. – Abbys Jun 20 '20 at 18:04
5

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.

Priyansh Garg
  • 96
  • 1
  • 4
1

As I mentioned here, you can just use Vanilla Javascript to check if the clicked element is a child of that same navbar and the content you want to hide (dropdown) is being shown.

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

https://jsfiddle.net/j4tgpbxz/

Douglas Vicentini
  • 132
  • 2
  • 11
0

Try this modified version of this answer, works great on Bootstrap 4.6.2

window.onload = function () {
    if (window.jQuery) {
        $(document).click(function (event) {
            var clickover = $(event.target);
            var _opened = $(".navbar-collapse").hasClass("collapse show");
            if (_opened === true && (!clickover.hasClass("navbar-toggler") || !clickover.hasClass("navbar-toggler-icon"))) {
                $("button.navbar-toggler").click();
            }
        });
    }
}

https://jsfiddle.net/x7kwn8ze/1/

DimensityDU
  • 26
  • 5
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 28 '22 at 05:06