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

Question

在导航栏中使用bootstrap 4的下拉菜单不起作用。我在用铁轨。下面给出了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并导入引导程序：

import "bootstrap"

这应该工作