javascript - Twitter Bootstrap nav collapse 点击隐藏

Question

当我点击菜单项时，菜单没有关闭。我已经检查了 JS 和 CSS 的导入，似乎一切正常，我还需要做些什么来运行菜单吗？

<!-- Fixed navbar -->
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

对我有用...

$(document).ready(function(){
  $('.navbar-collapse a').on('click', function(){
            $('.navbar-toggle').click();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>