Question

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

代码：

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

我试图遵循这个answer，但它不起作用..

Answer 1

data-target和data-toggle

的错误太多了

这可能对您有所帮助

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

<强>的JavaScript

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

LIVE DEMO

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

1 个答案: