Bootstrap 4 Navbar 切换无法隐藏（ruby on rails 应用程序）

Question

我正在学习 bootstrap 4，但在使用切换器隐藏菜单时遇到问题。我可以轻松展开菜单，但如果我点击切换器，它不会隐藏菜单

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light navbar-expand-lg" style="background-color:#fff !important;border-bottom:2px solid #d6d6d6" >
    <%= link_to root_path, class:"navbar-brand" do %>
        <p  style="margin-top: auto; margin-bottom: auto;"></i> Firstapp</p>
    <% end  %>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li>
                <%= link_to raw('Clients'), clients_path, class: "nav-link" %>
            </li>
            <li>
                <%= link_to raw('Contact'), contact_path, class: "nav-link" %>
            </li>
            <li class="nav-item">
                <%= link_to raw('About us'), about_path, class: 'nav-link' %>
            </li>
            <li>
                <%= link_to raw('Offer'), offer_path, class: "nav-link" %>
            </li>
            <li class="nav-item">
                <%= link_to raw('Solutions'), solutions_path, class: "nav-link" %>
            </li>
        </ul>
    </div>
</nav>

我在控制台中有这样的警告

turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7

您正在从 元素。这可能不是你的本意！

在元素内加载应用程序的 JavaScript 包 反而。中的元素在每个页面上进行评估 改变。

有关详细信息，请参阅： https://github.com/turbolinks/turbolinks#working-with-script-elements

——通过添加一个来抑制这个警告 data-turbolinks-suppress-warning 属性为：

这是 application.js 文件

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require popper
//= require bootstrap
//= require froala_editor.min.js
$(document).on('turbolinks:load', function() {
  $(function() { $('textarea').froalaEditor();
});
});

//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/help.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/print.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js

//= require third_party/embedly.min.js
//= require third_party/menuimage_aviary.min.js
//= require third_party/spell_checker.min.js
//= require social-share-button
//= require social-share-button/wechat # if you need use WeChat

我指望你的帮助，我希望我的问题适合在stackoverflow上启动主题。

Answer 1

问题是因为Turbolinks，如果你有灵活性不使用Turbolinks，那么从application.js中删除这一行

//= require turbolinks

如果您无法删除 Turbolinks，解决方法是使用引导程序 .collapse 方法以编程方式隐藏导航栏

$('.navbar-collapse').collapse('toggle');

折叠方法文档here。