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

Question

我有这个 left side bar，我想要的是当在它外面点击时关闭 side nav。

我的 side nav javascript 代码

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

任何建议都可以。甚至 javascript 或 css 也只是为了隐藏我的侧导航栏。

我的导航栏和左侧导航条码

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

谢谢!!!!!!

Answer 1

使用 onclick window 并删除类 show(如果存在)..

同时使用 onclick 导航来防止折叠

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