Question

我已经尝试了多个解决这个问题的解决方案，我已经在堆栈中找到了，但我仍然无法解决我的特定问题。这就是我正在研究的http://dev.joneslewis.co.uk/。如您所见，在移动视图中，无论我点击li元素还是菜单本身，汉堡包菜单一旦打开就不会崩溃。由于该网站以锚点为基础，这真的很痛苦......

这是我目前正在使用的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')

导航栏菜单未关闭（点击菜单和li元素）

1 个答案: