Hiding the navigation bar upon clicking the area

Question

I am newbie in JavaScript and this is my first post here.

I am working on an admin control panel made with bootstrap, the navbar works fine but I am trying to hide it upon clicking the area outside of the navigation bar when it is toggled for mobile view only. This is my navbar code

<div id="sidebar-wrapper">
<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container-fluid" id="navfluid">
            <div class="navbar-brand">
                <a id="menu-toggle" href="#" style="padding-left: 20px;"><i class="fa fa-bars"></i></a>
            </div>
            <span class="navbar-text visible-xs-inline-block visible-sm-inline-block visible-lg-inline-block">
                <span id="tab_name"></span>
            </span>
        </div>
    </nav>
</div>
<nav class="navbar navbar-default navbar-fixed-left">
    <ul class="nav navbar-nav tabs" id="myTab" align="center">
        <!-- items -->
    </ul>
</nav>

The css:

@media (max-width:767px) {
#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0px;
  width: 200px;
}

#wrapper.active {
  position: relative;
  left: 0px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 0px;
  transition: all 0.4s ease 0s;
}

#menu-toggle {
  display: inline-block;
}

}

And to toggle it:

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

Can someone explain to me how can it be done? I tried few ways which kind of worked but in a buggy ways.

Answer 1

Have a look that:

add navbar-collapse class to your nav tag,

<nav class="navbar navbar-default navbar-fixed-top navbar-collapse" role="navigation">
   // rest of the code
</nav>

then

$(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/