导航栏中的下拉菜单在 rails 6 中不起作用

Question

在导航栏中使用 bootstrap 4 的下拉菜单不起作用。我正在使用 rails6。 下面给出了 gemfile 和 application.js。 Bootstrap 和 jquery 已正确安装。

这是我的 gemfile:-

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'

application.js 文件:-

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .

Answer 1

不知何故 jquery 在 rails 6 中表现特殊。为了正确工作，我不得不通过 yarn 添加它（这是 jquery 的不同版本）。

在您的终端（应用程序目录）中输入：

yarn add jquery popper.js

然后转到您的 environment.js 并使其看起来像这样：

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment

然后转到您的 application.js 并导入 bootstrap:

import "bootstrap"

这应该有效