Question

我正在尝试实现Bootstrap 3导航栏。几乎一切都有效，但有一个错误。在小屏幕上，会出现小菜单图标。单击它时，菜单会展开并运行。但是，当我再次单击菜单图标时，它拒绝崩溃。然后菜单被卡住了＃34;在永久扩张的状态。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
            <div class="navbar-header">
            <img src="img/x_small.png" alt="X" style="padding:5px 15px;">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </div> 
                <div id="navbar-collapse-1" class="navbar-collapse collapse" style="height:0px;">
                <ul class="nav navbar-nav">
                    <li><a href="#problem">Problem</a></li>
                    <li><a href="#synthesis">Synthesis</a></li>
                    <li><a href="#comments">Comments</a></li>
                    <li><a href="#solution">Solution</a></li>
                    <li><a href="research.php">Research</a></li>
                    <li><a href="press.php">Press Info</a></li>
                </ul>
                <p class="navbar-text navbar-right hidden-xs hidden-sm" style="color:#CCC">X: text here &nbsp;</p>
                </div>
          </div>
</div>

我知道其他人遇到了导航栏问题（Bootstrap 3 Navbar Expands but will not Collapse），但问题似乎有所不同 - 在另一个问题中，菜单会部分折叠然后重新打开。我甚至没有以任何方式回应按钮，因此我提出了一个单独的问题。

====== EDIT＆amp;答案=========

解决方案很简单，虽然不直观：我颠倒了调用javascript文件的顺序。而不是默认顺序：

<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

我用过：

<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>

并以某种方式一切正常。我不知道为什么。分享此解决方案以防其他人偶然发现它。

Answer 1

解决方案很简单，虽然不直观：我颠倒了调用javascript文件的顺序。而不是默认顺序：

<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

我用过：

<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>

并以某种方式一切正常。我不知道为什么。分享此解决方案以防其他人偶然发现它。

Answer 2

我有相同的症状：导航栏中的切换按钮保持活动状态，导航栏菜单保持打开状态。单击按钮时会播放关闭动画（引导程序将“ closesing”类添加到菜单中），但是在关闭动画完成后，立即将“ in”类添加回菜单，以使其保持打开状态。 / p>

我尝试了GK79的答案，它解决了这个问题，但又产生了其他问题-例如，如果我在jQuery之前加载了bootstrap，bootstrap scrollspy插件就会停止工作。

对我来说，原因是jQuery和Bootstrap是在HTML正文的末尾而不是在标头中加载的。

将脚本标签从HTML页脚移动到页眉，然后先加载jQuery，然后在HTML标头内部加载bootstrap 3，为我解决了这个问题。

bootstrap 3导航栏在小屏幕上展开，但仍然处于展开状态

2 个答案: