在外部单击时隐藏Bootstrap侧导航栏

Question

I have this left side bar and all i want is that side nav to close when clicked outside of it.

My side nav javascript code

//side-nav is the class of my side nav 
//leftmenutrigger is my button on nav bar the toggles the side nav

Any suggestions will do. Even javascript or css just to hide my side nav bar.

My navigation bar and left side nav bar codes

 $( document ).ready(function() { $('.leftmenutrigger').on('click', function(e) { $('.side-nav').toggleClass("open"); e.preventDefault(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" > <span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES--> <a class="navbar-brand" href="#"> <img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;"> </a> <a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon" ></span> </button> <div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS <ul class="navbar-nav animate side-nav "> <li class="nav-item"> <a href="" id="addUser" name="addUser" style="width: 100%"> <i class="fa fa-plus-circle"></i> Add User </a> <a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self"> <i class="fa fa-table"></i> Manage Prizes </a> </li> </ul> </div> </nav> 

THANKS!!!!

Answer 1

Use onclick window and remove class show if exist..

Also use onclick the nav to prevent collapse

 $(window).click(function(e) { if($(".navbar-collapse").hasClass("show")){ $('.navbar-collapse').removeClass("show"); e.preventDefault(); } }); $('.navbar-collapse').click(function(event){ event.stopPropagation(); }); 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" > <span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES--> <a class="navbar-brand" href="#"> <img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;"> </a> <a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon" ></span> </button> <div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS <ul class="navbar-nav animate side-nav "> <li class="nav-item"> <a href="" id="addUser" name="addUser" style="width: 100%"> <i class="fa fa-plus-circle"></i> Add User </a> <a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self"> <i class="fa fa-table"></i> Manage Prizes </a> </li> </ul> </div> </nav> 

Answer 2

Here is the example from Bootstrap 3 :

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>
   </div>
</nav>

And the JS code that works for me:

1. Anywhere outside .navbar-collapse :

$("body").click(function (event) {
    var target = $(event.target);
    var navbarCollapse = $(".navbar-collapse");               
    var navbarCollapseOpened = navbarCollapse.hasClass("in");
    if (navbarCollapseOpened && !target.hasClass("navbar-toggle")) {      
        navbarCollapse.collapse("hide");
    }
});

2. Anywhere outside .navbar :

$("body").click(function (event) {
    var navigation = $(event.target).parents(".navbar").length;
    if(!navigation) {
        $(".navbar .navbar-collapse").collapse("hide");
    }
});

Answer 3

document.addEventListener("click", function(event) {
    // If user clicks inside the element
    if (event.target.closest(".side-nav")){
       $('.side-nav').removeClass("open"); 
    };
});

It will handle clicking outside element in jQuery.

It use event bubbling. When user click in any element inside .side-nav event is going upper to the document and if somewhere we .side-nav as a ancestor of such element it means that click was made inside.