javascript - 导航栏菜单未关闭(单击菜单和 li 元素)

Question

我已经尝试了围绕这个问题的多种解决方案，我在堆栈上找到了这些解决方案，但我似乎仍然无法解决我的特定问题。这就是我正在做的http://dev.joneslewis.co.uk/ 。正如您所看到的，在移动 View 中，无论我单击 li 元素还是菜单本身，汉堡菜单打开后都不会折叠。由于该网站是基于 anchor 的，所以这真的很痛苦......

这是我当前正在使用的 html 和 Js...

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" rel="home" href="#">
     <img class="img-responsive" style="max-width:35px; margin-top: -7px;"
          src="#"/>
      </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
        <li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Javascript...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
      <script>
      $(document).ready(function () {
    $(".navbar-nav li a").click(function(event) {
        $(".navbar-collapse collapse").collapse('hide');
    });
});
      </script>

Answer 1

选择器似乎不正确。我尝试了这个，我能够选择组件并隐藏菜单。

$(".navbar-collapse.collapse").collapse('hide')