Question

这是我的代码的样子，但问题是：当我点击折叠按钮（有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 .

Answer 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是正确加载还是多次加载。如果能解决问题，请告诉我:)）

Answer 2

在我的情况下，发生了类似的情况，因为我之前为生产预编译了我的资产，dev和prod js资产都在运行。

rake assets:clean（rails3）/ rake assets:clobber（rails4）解决了此问题。

Twitter bootstrap导航崩溃

2 个答案: