Question

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

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

Answer 1

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

在文件

中

app/assets/javascripts/application.js

删除此行

//= require turbolinks

Answer 2

Dirty Solution将把以下内容放入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的Doc https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

Answer 4

将此添加到您的标题中。

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

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

4 个答案: