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