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

Question

我有这个left side bar ，我想要的就是当在其外部单击时关闭该side nav left side bar 。

我side nav javascript 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> 

Answer 2

这是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>

和适合我的JS代码 ：

1. .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. .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"); 
    };
});

它将处理jQuery中外部元素的单击。

它使用事件冒泡。 当用户单击.side-nav事件内的任何元素都将向上移至文档上方，并且如果我们将.side-nav作为该元素的祖先的某个位置，则表示单击是在内部进行的。