Bootstrap sass nav下拉式不起作用

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

这里是我的代码：

_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>

所有帮助表示赞赏。

来源

2013-10-28 user2494042

我还在为此挣扎大约两周，我很确定它与_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-11 18:10:44 britneywright

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

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

来源

2014-01-21 18:35:36 Hopstream

我设法通过使用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-11 01:58:54

Bootstrap sass nav下拉式不起作用

回答

相关问题