Bootstrap 导航栏折叠菜单不适用于 Turbolinks答案

【问题标题】：Bootstrap navbar collapse menu not working with TurbolinksBootstrap 导航栏折叠菜单不适用于 Turbolinks
【发布时间】：2013-12-20 20:29:26
【问题描述】：

Bootstrap 导航栏折叠菜单不适用于 Turbolinks。

工作场景

页面加载

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

点击菜单和下拉菜单

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

再次点击菜单并折叠

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

不工作（导航到任何页面后）

页面加载
```
the same html, no need to repeat
```
点击菜单和下拉菜单
```
the same html, no need to repeat
```

再次点击菜单并折叠

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"和高度：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
引导程序 3.0.3

希望有人能给出真实的答案或解释。

【问题讨论】：

和我一样的问题，玩了一段时间后发现禁用是最好的。但是能够拥有 Turbo 链接会很酷。
关于这个问题的任何更新？
我根本不使用 Turbo 链接，我在做单页应用。

标签： ruby-on-rails-4 twitter-bootstrap-3 turbolinks

【解决方案1】：

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

在文件中

app/assets/javascripts/application.js

删除这一行

//= require turbolinks

【讨论】：

同时从 javascript_include_tag 中移除 "data-turbolinks-track" => true。

【解决方案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

【讨论】：

【解决方案3】：

其他解决方案。

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

&lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent&gt; Button&lt;/button&gt;

来自 Turbolinks 的文档 https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

【讨论】：

【解决方案4】：

将此添加到您的标题中。

&lt;meta name="turbolinks-visit-control" content="reload"&gt;

【讨论】：