我在我的Rails应用中使用materialize-sass
gem并且在使用它时遇到了一些麻烦。它只能在root(home)页面和其他一些页面上正常工作,但不能在完整站点上工作。
.button-collapse
丢失的功能和菜单不起作用。我只需点击它,或点击(在移动设备中),没有任何反应。有时它会在页面刷新后起作用,有时候不会。总是在点击.button-collapse
之后,最后添加#!
(在逻辑上可以理解),除了根(主页)页面。
我认为这可能是jQuery问题,但我在assets/javascripts/application.js
中初始化了折叠按钮,如下:
$(function() {
$(".button-collapse").sideNav();
});
像官方指南一样。我也尝试使用document.ready
。我的所有相关代码都位于application.html.erb
,如下所示:
<header>
<div class="row">
<nav class="col s12 nav-wrapper">
<%= link_to 'Blog', root_path, class: 'brand-logo' %>
<a href="#!" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<% if user_signed_in? %>
<li>
<%= "Hello, #{current_user.username}" %>
</li>
<li>
<%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
</li>
<% else %>
<li>
<%= link_to 'Sign in', new_user_session_path %>
</li>
<% end %>
</ul>
<ul class="side-nav" id="mobile-demo">
<% if user_signed_in? %>
<li>
<%= "Hello, #{current_user.username}" %>
</li>
<li>
<%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
</li>
<% else %>
<li>
<%= link_to 'Sign in', new_user_session_path %>
</li>
<% end %>
</ul>
</nav>
</div>
</header>
答案 0 :(得分:0)
当我在Rails项目中使用turbolink时,我需要一种方法来处理它们。只需在JavaScript清单文件中添加jquery.turbolinks gem和此代码://= require jquery.turbolinks
即可解决问题。
此外,还有很多简单方法可以通过添加以下内容来解决此问题:
$(document).on('ready page:change', function() {
Waves.displayEffect(); // Initialize buttons wave effects
$(".button-collapse").sideNav(); // Initialize collapse button
});