Bootstrap导航栏折叠菜单不与Turbolinks一起使用

Question

Bootstrap导航栏折叠菜单不与Turbolinks一起使用.

工作方案

1. 在页面加载

   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse collapse" id="menu"> </div>
   

2. 单击菜单和下拉列表

   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
   

3. 再次单击菜单并折叠

   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>
   

不工作(导航到任何页面后)

1. 在页面加载

   the same html, no need to repeat
   

2. 单击菜单和下拉列表

   the same html, no need to repeat
   

3. 再次单击菜单并折叠

   3.1.在调试器中观察到瞬态变化

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   
       <div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>
   

   注意:class ="navbar-collapsing"和height:96px;

   3.2.然后回到相同的状态

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
       <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
   

   注意:与步骤2中的html相同.

Libs版本:

• Turbolinks 2.1.0
• JQuery 2.0.3
• Bootstrap 3.0.3

我希望有人能提出真实的答案或解释.

Answer 1

这里的负责人是Turbolinks。解决方法是不加载 Turbolinks javascript。

在文件中

app/assets/javascripts/application.js

删除这一行

//= require turbolinks