Question

我在轨道上的红宝石存在问题并实现了（javscript connexion）。我已经安装了https://github.com/mkhairi/materialize-sass和去激活的Turbolink。例如，当我在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' %>

我尝试了Turbolink或使用

直接导入到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

但是什么都行不通，与视差或任何其他元素相同谢谢你的帮助对不起，谷歌翻译再见

Answer 1

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

您可以按照文档说明将application.css更改为application.scss并将其放置在其中：@import "materialize";，也可以创建custom.css.scss并放置{{1 }}。

下一步，我怀疑您没有任何行为的原因是要求@import "materialize";，就像您需要jquery一样

materialize

我可以理解，由于文档中未涵盖此步骤，因此错过了这一步，因此，如果您不从容和谨慎地考虑，那么它可能会成为一堵墙。

最后，在相同的//= require rails-ujs //= require jquery //= require materialize //= require turbolinks //= require_tree .文件中，您从文档中删除了最后一块：

application.js

Answer 2

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

更改

//= require materialize

到

//= require materialize-sprockets

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

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

2 个答案: