Bootstrap 下拉菜单不适用于 ruby on rails答案

【问题标题】：Bootstrap dropdown not working on ruby on railsBootstrap 下拉菜单不适用于 ruby on rails
【发布时间】：2023-03-10 07:27:02
【问题描述】：

我正在尝试让引导下拉菜单工作，引导显示正确但下拉操作不起作用，我怀疑它与 jquery 有关，但 jquery 工作正常。

./Gemfile

gem "bootstrap", "~> 4.4"    
gem "jquery-rails", "~> 4.3"

./app/assets/stylesheets/application.scss

@import "bootstrap";

./app/javascript/packs/application.js

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

在我的浏览器控制台调用

$('.dropdown-toggle')

工作得很好，但是在调用时

$('.dropdown-toggle').dropdown()

说Uncaught TypeError: $(...).dropdown is not a function at <anonymous>:1:23

这是从Bootstrap's navbar example复制的html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

编辑：

Popper.js 已正确包含，我已通过删除手动导入对此进行了测试，我认为问题在于包含 jquery 和 bootstrap 时，因为一旦我删除其中一个手动导入，下拉菜单就会中断（不更改视图)

【问题讨论】：

可以分享一下html吗？
@Seyon 刚刚添加
当您尝试通过 script src 命令在您的 html 中显式包含 javascripts 时（请参阅顶部部分：getbootstrap.com/docs/4.4/getting-started/introduction）是否有效？
@Seyon 它按预期工作，那些javascript不是添加到application.js上吗？
尝试在您的 application.js 中引导之前定义 jquery

标签： jquery ruby-on-rails bootstrap-4

【解决方案1】：

正如here 所解释的，bootstrap 4 下拉菜单基于第三方库 popper.js 构建，该库提供动态定位和视口检测。可能你没有popper.js，或者由于某种原因它不起作用。

【讨论】：

我认为这是最接近答案的方法，但是在我的 application.js 中包含 popper 似乎不起作用。正如@Seyon 建议的那样明确包括javascript确实有效，但我认为它不起作用，因为它避免了不使用rails资产管道。
检查您的安装。例如here 是一个使用 Webpacker 将 Bootstrap 4 安装到 Rails 6 的看似合理的教程。

【解决方案2】：

我不知道我的回答现在是否相关。但我能够通过更改 application.html.erb 文件来解决下拉问题。

以前是这样的

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

然后我改成这个

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

【讨论】：