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

Posted 2023-05-09

【中文标题】导航栏中的下拉菜单在 Rails 6 中不起作用

【英文标题】：Dropdown in navbar is not working in rails 6

【发布时间】：2021-01-10 14:32:19

【问题描述】：

在导航栏中使用 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 .

【问题讨论】：

请分享与问题相关的代码和努力，并更详细地提及问题

【参考方案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"

这应该可以工作