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>

Answer 2

以下是引导程序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代码：

.navbar折叠之外的任何地方：

$("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");
    }
});

.navbar 以外的任何地方：

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

Answer 3

import asyncio
from channels.db import database_sync_to_async

async def hub_notify(self, event):
   asyncio.sleep(1)
   me = await database_sync_to_async(HubNotify.objects.get) 
   (username=event['username'])

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

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

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

3 个答案: