Twitter Bootstrap 导航栏折叠

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 .

- oFca

---

为什么要将导航折叠嵌套在另一个容器中？只需要一个，<div class="container nav-collapse">从此div中删除container类。另外，你的js加载顺序是什么？ - Andres Ilich

另外，JS 加载的顺序很重要，因为下拉插件是此功能所必需的，因此应在加载 jQuery 插件后再加载它。因此，jQuery 首先 > bootstrap.js 其次 - 或者如果您包含单独的插件，则应该先加载 transition.js 插件，然后是下拉插件。 - Andres Ilich

因此，js需要加载的顺序是首先加载jquery，然后是bootstrap插件。原因是由于bootstrap插件是jquery插件，它们需要在jquery加载“后”加载，否则你会得到像现在看到的结果一样。Bootstrap插件优先加载，其次是jquery，你点击需要jquery加载的元素，第一次不起作用，但会被触发，在第二次尝试时就可以正常工作。不太清楚这个gem，但应该是在页面加载完成后最终标记的顺序，所以只需查看源代码即可。 - Andres Ilich

我在问题中添加了我的application.js文件，您可以看到我加载js的顺序。它仍然无法正常工作...还有其他想法吗？ - oFca

没有任何问题，你的js顺序看起来很好，所以一定是其他原因。你能否发布你的网站链接？ - Andres Ilich

Answer 1

听起来你可能会重复加载某些JS文件。在像Ruby或Grails这样的环境中，很容易忘记文件加载的位置。

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

```html ```

<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是否正确加载或多次加载。如果问题得到解决，请告诉我 :)

- Nathan

Answer 2

在我的情况下，类似于这种情况的发生是因为我之前已经为生产环境预编译了资产，导致dev和prod js资产都在运行。 rake assets:clean（rails3）/ rake assets:clobber（rails4）可以解决此问题。

- vaughanos