时间戳

首页 > 解决方案 > 单击外部时隐藏 Bootstrap 侧导航栏

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

问题描述

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

我的side navJavaScript 代码

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

谢谢！！！！

标签： javascripthtmlcssbootstrap-4

解决方案

这是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");
    }
});
  1. .navbar以外的任何地方：
$("body").click(function (event) {
    var navigation = $(event.target).parents(".navbar").length;
    if(!navigation) {
        $(".navbar .navbar-collapse").collapse("hide");
    }
});

推荐阅读