Twitter bootstrap 单击导航栏元素外部时打开的折叠导航栏未关闭

我想在单击导航栏元素外部时关闭打开的折叠导航栏。我不知道为什么我的导航栏没有关闭，所以我决定向您展示我的代码

代码：

 <nav class="navbar navbar-custom navbar-static-top">
 <div class="container-fluid">
      <!-- for mobile display -->
      <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#head_menu" 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>
         <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand">Project Name</a>
       </div>

      <!-- collects the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id = "head_menu">
        <ul class = "nav navbar-nav">
             <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-home"></span> Home</a></li>
             <li> <a href = "#" data-toggle="collapse" data-target=".navbar-collapse.in">About CMMS</a></li>
             <li> <a href = "#" data-toggle="collapse" data-target=".navbar-collapse.in">Services</a></li>
             <li> <a href = "#" data-toggle="collapse" data-target=".navbar-collapse.in">JPS</a></li>
             <li> <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in">Contact</a></li>
        </ul> 
        <ul class ="nav navbar-nav navbar-right">
             <li> <a href= "#" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-log-in"></span> Login </a> </li>
             <img id="jps" src="">
        </ul>
     </div>
   </div>
  </nav>

切换导航

---

我尝试过遵循这一点，但没有成功。

您在

数据目标

和

数据切换

这可能对你有帮助

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-brand">
        Project Name
      </div>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#head_menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="head_menu">
      <ul class="nav navbar-nav">
        <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li> <a href="#">About CMMS</a></li>
        <li> <a href="#">Services</a></li>
        <li> <a href="#">JPS</a></li>
        <li> <a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#"><span class="glyphicon glyphicon-log-in"></span> Login </a> </li>
        <img id="jps" src="">
      </ul>
    </div>
  </div>
</div>
<div>

---

我的代码中有奇怪的行为，我怀疑有一个引导链接丢失，或者我页面中的当前链接不是正确的链接。我复制了我所有的代码，并将其粘贴到您提供的实时演示中，效果很好，但当我创建自己的小提琴时，它不起作用！你能告诉我你在现场演示的外部资源中包含了什么引导链接吗？我想试试看会发生什么。。。

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