Rails 6集成Materialize CSS后dropdown下拉菜单失效报错的问题问询

1. 调整app/javascript/packs/application.js的代码顺序，补充初始化逻辑 #

你的原代码将window.jQuery = $放在了最开头，此时jQuery还未完成加载，会导致Materialize无法正确将自身方法挂载到jQuery实例上，同时你缺少Materialize组件的初始化逻辑，修改后完整代码如下：

// 先加载jQuery再暴露到全局作用域
import jQuery from 'jquery'
window.$ = jQuery
window.jQuery = jQuery

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

// 确保jQuery加载完成后再导入Materialize
import 'materialize-css/dist/js/materialize';
import '../stylesheets/application';

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// 监听Turbolinks加载完成事件，初始化对应组件
document.addEventListener('turbolinks:load', function() {
  // 初始化移动端侧边栏
  $('.sidenav').sidenav();
  // 初始化下拉菜单
  $('.dropdown-trigger').dropdown();
})

2. 确认依赖已正确安装 #

执行以下命令安装所有所需依赖：
yarn add jquery materialize-css velocity-animate

3. 重启服务生效 #

修改配置后需要重启webpacker相关服务：

• 停止当前运行的Rails服务
• 重新执行rails s启动服务，如果你单独运行了webpack-dev-server也同步重启即可

额外检查项 #

如果下拉菜单仍无法工作，确认你的触发元素已正确添加dropdown-trigger类、data-target属性指向对应下拉菜单的DOM ID，配置逻辑和侧边栏一致即可。

内容的提问来源于stack exchange，提问作者Yves Somda