CODEWITHSUNDEEP
javascripttwitter-bootstrapnavbar
TheLearner
TheLearner

Reputation: 2873

How to close the Bootstrap navbar dropdown when the user clicks outside the menu?

I have a Bootstrap navbar that collapses when shrunk and drops down as a menu when the toggle button is tapped/clicked. However, once open, it stays open until one clicks the toggle button again. Is there any way to close it automatically when the user A) clicks outside the menu area, and B) scrolls the page up or down on the mobile device? Here's what the navbar looks like when collapsed:

enter image description here

And this is the dropdown:

enter image description here

I need the dropdown to collapse when the yellow area or any menu item is clicked (except the search box). So far, my JS looks like this:

// prevent search box from vanishing upon click in responsive mode
$('input.form-control').click(function(e) { e.stopPropagation(); });

// re-collapse nav dropdown menu after selection (in responsive mode)
    $('.navbar-fixed-top').click('li', function() {
        $('.navbar-collapse').collapse('hide');
    });


// close drop-down nav when user clicks outside
    $(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();
            }

        });
    });

And here's the relevant HTML snippet:

<!-- Nav bar -->
    <div class="navbar navbar-default navbar-fixed-top top-nav" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
        </div>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" ng-controller="HeaderController">
          <!-- Search box start --> 
            <form class="navbar-form navbar-right search-box" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
              </div>
            </form>
            <!-- Search box start -->
            <ul class="nav navbar-nav pull-right">
                <li ng-class="{ active: isActive('/about')}"><a href="#about">About</a></li>
                <li ng-class="{ active: isActive('/blog')}"><a href="#blog">Blog</a></li>
                <li><a href="#">Premium</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="javascript:;" data-target="#contact" data-toggle="modal">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>

Of the 3 JS scripts, the first two seem to work fine. It's just the last one that doesn't. Also, I don't yet know how to field the scroll event at all. I am sure I'm doing something very silly here. Please help!

Upvotes: 0

Views: 1445

Answers (1)

11111000000
11111000000

Reputation: 193

listen for all clicks on window and check if there is no parents here with class of navbar. you can use closest for that https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Polyfill: https://github.com/jonathantneal/closest

Upvotes: 0

Related Questions