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下拉式不起作用

回答

相關問題