Question

我似乎无法找到我的代码有什么问题，但点击时折叠按钮不会激活下拉列表。我的javascript在我的应用程序的其他区域工作，但导航按钮不起作用。这是我项目的链接：https://github.com/parisliahyun/citibikeapp

这是我的代码：

_header.html.erb：

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>

   <!-- Collect the nav links, forms, and other content for toggling -->       
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav"> 
      <% if logged_in? %>
      <li><%= link_to "Awesome Citi", root_path %> </li>
      <li><%= link_to "My Account", account_path %> </li>
      <li><%= link_to "New Search", new_search_path %> </li>
      <li><%= link_to "Saved Destinations", user_path(current_user) %></li>
      <li><a href="http://citibikenyc.com/stations"target="_blank">Station Map</a></li>
      <li><%= link_to 'Logout', session_path, :method => :delete %> </li>
      <% end %>
    </ul>
  </div>
</nav>

的application.js：

...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <title>Awesome Citi</title>
      <%= stylesheet_link_tag "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <%= render 'layouts/header'%>
<div class="container">
  <%= yield %>
</div>
<footer>
</footer>
</div>

</body>
</html>

所有帮助表示赞赏。

Answer 1

在<head></head>中包含JQuery和Bootstrap.js修复了这个问题。

出于某种原因，只有当你将js包含在之前的底部时才会发生。

Answer 2

我也在努力解决这个问题大约两周，我很确定它与你的_header.html.erb文件中的数据目标有关。尝试：

`<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex1-collapse">`

和

<div class="collapse navbar-collapse" id="navbar-ex1-collapse">

您需要将按钮与div相关联，方法是为其提供相同的ID。

Answer 3

我设法通过使用jQuery和bootstrap.js的CDN来解决这个问题。

只需将其添加到您的html：

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

您当然可以链接到本地脚本，但这是一个快速的解决方案。

Bootstrap sass nav下拉列表不起作用

3 个答案: