如何使用 Turbolinks 扩展 Bootstrap 导航栏

Question

在我的 Rails 4 应用程序中，我使用 Bootstrap 的导航栏。当导航栏折叠时，单击它时它并不总是展开/切换。菜单图标显示，但当您单击它时，它没有执行任何操作：

我知道它与

Turbolinks

有关，因为当我手动输入视图的url时，只有在单击链接后，它才不会发生。另外，当我从应用程序中完全删除

Turbolinks

时，它就会消失。

基于这些问题：

• 切换页面后引导下拉列表停止工作 - Rails 4.2
• Bootstrap 3 下拉菜单不适用于 Rails 4 和 Turbolinks
• Turbolinks 不起作用 - 而是加载页面两次
• Bootstrap 导航栏折叠按钮在 Rails 4、Bootstrap 3 中不可点击

我已经尝试过这些方法，但没有解决问题：

1. 将样式表和 JavaScript 移至正文
2. 为所有 javascript 和样式表设置 `data-turbolinks-track='false'
3. 为所有 JavaScript 和样式表设置

   'data-turbolinks-eval' => false

4. 使用

   jquery-turbolinks

对我来说有趣的是，其他 Bootstrap 元素（例如菜单下拉列表）对我来说不存在

Turbolinks

的问题。

我知道我可以删除

Turbolinks

，但如果可能的话我宁愿保留它。有办法做到这一点吗？

我的看法：

<nav class="navbar navbar-ct-danger navbar-fixed-top" role="navigation-demo" id="demo-navbar"  data-no-turbolink ="false">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2" data-no-turbolink ="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <%= image_tag " logo.png"%>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navigation-example-2" data-no-turbolink ="false">
      <ul class="nav navbar-nav navbar-right">
          <li>
            <%= link_to "Games", games_path %>
          </li>
          <li>
            <%= link_to "Days", days_path %>
          </li>
       </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-->
</nav>

宝石文件

gem 'jquery-rails', '4.0.5'
gem 'turbolinks', '2.5.3'
gem 'jquery-turbolinks', '2.1.0'

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Answer 1

对于 2023 年或以后使用 Rails 7、Bootstrap 5 和 Turbo-rails gem 遇到此问题的任何人（因为是的，这仍然是一个问题，我花了几天时间尝试修复它，因为旧的 Rails 4/5 + jquery 都没有）解决方案适用，因为 Bootstrap 5 不再使用 jquery）我终于找到了解决问题的方法：

将

data-turbo="false"

添加到视图布局 .html.erb 文件中最外面的导航栏 HTML 元素。这似乎可以防止导航栏成为“未真正重新加载”问题的受害者，但在其他地方都可以通过 Turbo 保持较高的性能。

示例：

<nav class="navbar navbar-expand-md sticky-top mt-0 pt-0" data-turbo="false">

来自turbo官方文档： https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms