Bootstrap导航栏在使用Turbolinks时无法折叠菜单

Question

Bootstrap导航栏与Turbolinks不兼容问题解决。

工作场景

1. On page load

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

2. Click menu and dropdown

   <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. Click menu again and collapse

   <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. On page load

   the same html, no need to repeat
   

2. Click menu and dropdown

   the same html, no need to repeat
   

3. Click menu again and collapse

   3.1. Transient change observed in the debugger

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

   Note: class="navbar-collapsing" and height: 96px;

   3.2. And then go back to the same state

       <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>
   

   Note: Same html as in step 2.

库版本：

• Turbolinks 2.1.0
• JQuery 2.0.3
• Bootstrap 3.0.3

希望有人能给出一个真正的答案或解释。

- givanse

---

和我有类似的问题，玩了一段时间后发现禁用是最好的选择。但是能够使用Turbo Links会更酷。 - Ziyan Junaideen

这个问题有任何更新吗？ - a14m

我根本不使用Turbo links，我正在做单页应用程序。 - givanse

Answer 1

这里的问题在于Turbolinks。解决方法是不加载Turbolinks的javascript。在文件“app/assets/javascripts/application.js”中删除以下代码行：//= require turbolinks。

- givanse

---

还要从javascript_include_tag中删除"data-turbolinks-track" => true。 - Fernando Kosh

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”

- kevincobain2000

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

- Esteban Higuita Duarte

Answer 4

将此代码添加到您的头文件中。

<meta name="turbolinks-visit-control" content="reload">

- glenn6452