Bootstrap 4 导航栏切换无法隐藏(Ruby on rails 应用程序)

Question

我正在学习引导程序 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属性为：

这是应用程序.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

我指望你的帮助，我希望我的问题适合在堆栈溢出上开始这个话题。

Answer 1

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

//= require turbolinks

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

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

此处提供 Collpase 方法文档。