Bootstrap 导航栏将打开，但不会关闭答案

【问题标题】：Bootstrap Navbar Will Open, But Not CloseBootstrap 导航栏将打开，但不会关闭
【发布时间】：2016-06-16 00:24:50
【问题描述】：

这是我正在使用的代码：

<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
            </button>
            <a class="navbar-brand" href="/">
                <img src="/application/themes/dcc_theme/img/DiscoveryChurchColorado.png" alt="Discovery Church Colorado, Colorado Springs, CO" class="img-responsive">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=""><a href="http://concrete.metooplace.com/about" target="_self" class="">About</a>
                </li>
                <li class=""><a href="http://concrete.metooplace.com/serve" target="_self" class="">Serve</a>
                </li>
                <li class=""><a href="http://concrete.metooplace.com/events" target="_self" class="">Events</a>
                </li>
                <li class="nav-selected nav-path-selected"><a href="http://concrete.metooplace.com/give" target="_self" class="nav-selected nav-path-selected">Give</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

测试页面的url是http://concrete.metooplace.com

问题是在移动设备上你可以点击菜单按钮，菜单会展开，但如果你再次点击它就不会关闭。

这工作正常。我一定是无意中更改了某些内容，或者我的 javascript 中存在冲突，但我似乎无法弄清楚发生了什么，我需要用新的眼光来检查它。

【问题讨论】：

看到这个issue。您需要使用不同版本的 jQuery 2.2.1 或 1.12.1。此外，navbar-right 与 navbar-nav 不搭配 navbar-collapse 请参阅 Navbar
我已将 jquery 版本更改为 2.2.1 和 1.12.1 并没有修复它

标签： jquery css twitter-bootstrap menu

【解决方案1】：

在我的例子中，bootstrap.min.js 在 index.html 和 angular.json 中都被调用了。所以，我只保留了一个。

【讨论】：

【解决方案2】：

我刚刚遇到了这个问题，这仅仅是因为文件 bootstrap.min.js 在head 和body 中都被调用了。

希望这可以节省一些时间?

【讨论】：

【解决方案3】：

即使您使用的是旧版本的 jQuery，也可能如此。我已经弄清楚了，在我对代码进行了几次更改之后（我正在构建一个 wordpress 网站），如果您尝试将一些旧版本的 jQuery（直到 1.7）与一些版本的 bootstrap.js （从 3.2 版开始）会产生这种错误。

【讨论】：

【解决方案4】：

这是 Bootstrap JS 的版本。我将其更改为 3.3.6 CDN 版本，并且可以正常工作。

【讨论】：

【解决方案5】：

我检查了你的 HTML 代码，问题是你试图在包含你的 jQuery 文件之前调用下面的代码。

<!--js/jquery stuff-->
<script>
$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});
</script>

请在包含您的 jQuery 文件后放置代码块：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

我希望它会起作用！

【讨论】：

是的，这是一个疏忽。仍然没有解决它。此外，开箱即用，我不应该添加这个额外的代码。我只是想看看它是否能解决它。没有它也能正常工作。

【解决方案6】：

我看到“未捕获的 ReferenceError：$ 未定义”

看起来您在包含 jQuery 之前使用的是 $。确保你的脚本顺序正确，你应该没问题！

【讨论】：

是的，监督。移动它，仍然无法正常工作。我什至不必使用那些额外的代码，因为它过去曾使用标准的 Bootstrap dist。