javascript - Bootstrap/Rails - 可折叠导航栏在移动设备上不起作用

Question

我正在使用 responsive navbar从 Bootstrap 。在移动设备中，出现了菜单图标，但是当我点击它时没有下拉菜单。我浏览过 SO，因为这似乎是一个常见问题，但数据目标 ID 是正确的，这似乎是其他人遇到的问题。我也没有在 JS 中发现任何错误，当我使用 Chrome 的开发工具检查页面时，控制台中没有任何错误。这是我的 HTML:

<nav class="navbar navbar-default navbar-area">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#responsive-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= image_tag "logo-wide-small.png", :class => "img-responsive" %>
    </div>

    <div class="collapse navbar-collapse nav-links-area" id="responsive-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Signup", '#' %></li>
        <li><%= link_to "Login", '#' %></li>
        <li><%= link_to "Language", '#' %></li>
        <li><%= link_to "JOIN NOW", '#', {:class => "btn btn-warning", :role => "button"} %></li>
      </ul>
    </div>
  </div>
</nav>

如果您能提供任何帮助，我们将不胜感激。此外，我正在使用 Chrome 的响应式网页设计测试器而不是实际设备对此进行测试，不确定这是否会有所不同。

Answer 1

html 标记看起来不错，所以请尝试检查您的 bootstrap.js 是否包含在之后 jQuery.js 文件中，如下所示:

<script src="/jQuery.js"></script>
<!--followed by the bootstrap script-->
<script src="/bootstrap.js"></script>