如何在菜单外单击时关闭自举4导航栏折叠菜单？

对于所有浏览器大小，此导航栏已折叠。我想知道如何在菜单外单击时关闭扩展菜单。因此，切换按钮不是关闭它的唯一方法。如何在菜单外单击时关闭自举4导航栏折叠菜单？

我已经尝试了Bootstrap 3的一些建议，其中之一是下面包含的Javascript代码，但它们似乎没有工作。

这可能是有用的说，我不知道JavaScript或PHP很好，但我打开你有任何建议。谢谢！

<nav class="navbar navbar-inverse bg-faded"> 
       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
       </button> 
       <span class="navbar-text">&nbsp;</span> 
       <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
       <ul class="navbar-nav flex-column"> 
        <li class="nav-item active"> 
        <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/support-2/">Support</a> 
        </li> 
        <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Legal 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a> 
         <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a> 
        </div> 
        </li> 
       </ul> 
       </div> 
      </nav> 

      <script> 
      $(document).click(function (event) { 
       var clickover = $(event.target); 
       var $navbar = $(".navbar-collapse");    
       var _opened = $navbar.hasClass("in"); 
       if (_opened === true && !clickover.hasClass("navbar-toggle")) {  
        $navbar.collapse('hide'); 
       } 
      }); 
      </script>

来源

2017-10-13 Michele

如果使用的是引导4，尝试这个jQuery的

，而不是躲在申请点击toggler $(".navbar-toggler").click();与show类和navbar-toggle与navbar-toggler

$(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".navbar-collapse").hasClass("show"); 
     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
      $(".navbar-toggler").click(); 
     } 
    }); 
});

工作小提琴代替in：https://jsfiddle.net/rg43fyhL/

$(document).ready(function() { 
 
    $(document).click(function (event) { 
 
     var clickover = $(event.target); 
 
     var _opened = $(".navbar-collapse").hasClass("show"); 
 
     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
 
      $(".navbar-toggler").click(); 
 
     } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse bg-faded"> 
 
       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
       <span class="navbar-text">&nbsp;</span> 
 
       <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
       <ul class="navbar-nav flex-column"> 
 
        <li class="nav-item active"> 
 
        <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/support-2/">Support</a> 
 
        </li> 
 
        <li class="nav-item dropdown"> 
 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
         Legal 
 
        </a> 
 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
         <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a> 
 
         <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a> 
 
        </div> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
      </nav>

来源

2017-10-14 05:14:27 Znaneswar

嗯似乎并没有为我工作，但也可能是我怎么包括脚本。我用

如何在菜单外单击时关闭自举4导航栏折叠菜单？

回答

相关问题