1

我似乎找不到我的代码有什么问题，但是单击时的折叠按钮不会激活下拉菜单。我在我的应用程序的其他区域有 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>

应用程序.js：

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

应用程序.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>

所有帮助表示赞赏。

4

3 回答 3

1

在<head></head>修复此问题时包含 JQuery 和 Bootstrap.js。

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

于 2014-01-21T18:35:36.120 回答
0

我也为此苦苦挣扎了大约两周，我很确定它与您的 _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">

您需要通过为按钮提供相同的 id 来将按钮与 div 相关联。

于 2013-11-11T18:10:44.410 回答
0

我设法通过使用 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>

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

于 2014-03-11T01:58:54.003 回答