Twitter引导程序导航崩溃

这是我的代码的样子，但问题是：当我单击折叠按钮（具有4条水平线的那个）时，它不会在第一次点击时打开，而只会在第第二次点击。第一次点击什么也不做，第二次快速打开它比快速关闭它要重新打开它。为什么是这样以及如何解决它？Twitter引导程序导航崩溃

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 .

来源

2012-05-15 oFca

为什么你在另一个容器中嵌套你的导航崩溃？只有一个是必须的，''div class =“container nav-collapse”>'从这个div中移除'container'类，同样，你的js加载的顺序是什么？ –

谢谢。我已经编辑了这个问题，因为我了解你解决了我的问题。这是你想到的吗？另外，我的JS加载在文件的末尾，正好在标记的上方，并且我只有这一行><％= javascript_include_tag“application”％>。我应该重新排列某些东西吗 – oFca

另一个js加载的问题，因为这个特性需要下拉插件，因此应该在jquery插件之后加载。所以，jQuery首先> bootstrap.js第二个 - 或者如果你包含单独的插件，它首先进入transition.js插件，然后是下拉插件。 –

这听起来像你是双装载一些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是否正确加载或多次加载。让我知道如果解决了这个问题:)

来源

2013-07-19 16:03:32 Nathan

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

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

来源

2016-05-03 23:33:13 vaughanos

Twitter引导程序导航崩溃

回答

相关问题