Twitter引导导航崩溃答案

【问题标题】：Twitter bootstrap nav collapsingTwitter引导导航崩溃
【发布时间】：2012-05-15 09:21:52
【问题描述】：

这是我的代码的样子，但问题是：当我点击折叠按钮（有 4 条水平线的按钮）时，它不会在第一次点击时打开，而只会在第二次点击时打开. 第一次点击什么也不做，第二次打开它很快，然后很快关闭它，然后再次重新打开。为什么会这样以及如何解决？

 22     <!-- BOOTSTRAP NAVBAR -->
 23     <div class="navbar navbar-fixed-top">
 24       <div class="navbar-inner">        
 25         <div class="container">
 26 
 27           <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">                                                   
 28             <span class="icon-bar"></span>  
 29             <span class="icon-bar"></span>  
 30             <span class="icon-bar"></span>  
 31             <span class="icon-bar"></span>
 32           </a>
 33     
 34           <%= link_to 'Synergy', root_path, :class => 'brand' %>                                                                          
 35 
 36           <div class="nav-collapse">                                                                                            
 37 
 38             <% if current_user %>                                                                                                         
 39 
 40               <ul class="nav">
 41                 <li><%= link_to 'My projects', projects_path %></li>
 42                 <li><%= link_to current_user.name, '#' %></li>
 43                 <li><%= link_to 'Log out', destroy_user_session_path, :method => :delete %></li>
 44               </ul>        
 45 
 46             <% else %>     
 47 
 48               <ul class="nav">
 49                 <li><%= link_to 'Sign in', new_user_session_path %></li>
 50                 <li><%= link_to 'Sign up!', new_user_registration_path %></li>
 51               </ul>        
 52 
 53             <% end %>      
 54 
 55           </div>           
 56 
 57         </div>             
 58       </div>               
 59     </div>
 60     <!-- BOOTSTRAP NAVBAR -->

编辑：这是我的 application.js 文件：

 13 //= require jquery
 14 //= require jquery_ujs
 15 //= require jquery-ui
 16 //= require twitter/bootstrap
 17 //= require_tree .

【问题讨论】：

为什么将导航折叠嵌套在另一个容器中？只需要一个，<div class="container nav-collapse">从这个div中删除container类，另外，你的js加载顺序是什么？
谢谢。我已经编辑了这个问题，因为我理解你要修复我的 div。这是你的想法吗？此外，我的 JS 加载在文件末尾，就在

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

听起来您正在双重加载一些 JS 文件。在 Ruby 或 Grails 等环境中，很容易忘记文件加载的位置。

尝试在页面脚本中包含对 Jquery 的调用，并在调用之后直接放置一个内联脚本。一个例子是这样的：

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap-carousel.js" type="text/javascript"></script>
<script src="js/bootstrap-transition.js" type="text/javascript"></script>
<script>

$(document).ready(function() {
    $('#myCarousel').carousel();
  });
</script>

添加此脚本后，请检查 Firebug 或其他开发人员工具中的 Web 控制台。您应该查看 jQuery 是否正确加载或多次加载。让我知道这是否解决了问题:)

【讨论】：

【解决方案2】：

在我的例子中，发生了类似的事情，因为我之前已经为生产预编译了我的资产，并且 dev 和 prod js 资产都在运行。

rake assets:clean (rails3) / rake assets:clobber (rails4) 修复了这个问题。

【讨论】：