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> 
   

   注：类= “Navbar的塌陷”和高度：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> 
   

   注：相同的HTML第2步中

利布斯版本：

• Turbolinks 2.1.0
• JQuery的2.0。 3
• Bootstrap 3.0.3

我希望有人能想出一个真实的答案或解释。

Answer 1

这里的责任是Turbolinks。解决方法是不加载Turb​​olinks JavaScript。

在文件

app/assets/javascripts/application.js

删除此行

//= require turbolinks

Answer 2

肮脏的解决方案将是把你的application.js

$(document).on("page:change", function() { 
    $(".navbar .dropdown").hover((function() { 
     $(this).find(".dropdown-menu").first().stop(true, true).delay(150).slideDown(); 
    }), function() { 
     $(this).find(".dropdown-menu").first().stop(true, true).delay(50).slideUp(); 
    }); 
    }); 

记住以下几点，这是change不是load

Answer 3

其他解决方案。

制作永久性元素。用jQuery打开或关闭下拉菜单。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent> Button</button>

从Turbolinks https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads