JavaScript无法与Materialize-css（rails）一起使用

Question

我对Rails上的ruby有问题，并且实现了（javscript connexion）。 我已经安装了https://github.com/mkhairi/materialize-sass和去激活的Turbolinks。 例如，当我在html页面上创建下拉菜单时，并且在javascript文件中时，我会初始化下拉菜单。 好像没有JavaScript一样无法正常工作

在我看来（indexCo.html.erb）：

<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a> 
</li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li> 
</ul>
</div>

application.js：

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require materialize
$('.dropdown-trigger').dropdown();

application.html.erb：

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

我尝试使用turbolinks或直接导入到application.html.erb中

https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css

和

https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js

但没有任何效果，与视差或任何其他元素相同感谢您的帮助，对不起Google翻译再见

Answer 1

请勿停用turbolinks 。 文档中无处： https : //github.com/mkhairi/materialize-sass表示停用turbolinks 。

您可以将application.css更改为application.scss并将其删除： @import "materialize"; 根据文档说明在其中，或者您可以创建custom.css.scss并放入@import "materialize"; 。

下一步，我怀疑您没有任何行为的原因是需要jquery ，就像您需要materialize这样：

//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .

我可以理解，由于文档中未涵盖此步骤，因此错过了这一步骤，因此，如果您不从容和谨慎地考虑，则可能会有些困难。

最后，在同一application.js文件中，从文档中删除最后一块：

//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .

$(document).on('turbolinks:load', function() {
  $('.dropdown-trigger').dropdown();
});

Answer 2

我最近遇到了同样的问题，并最终解决了。

更改

//= require materialize

至

//= require materialize-sprockets

我不确定技术上的区别是什么，但是在Rails 5.1.6中它对我有用。