Materializecss菜单仅在一个页面上正常工作

Question

我在我的Rails应用程序中使用了materialize-sass gem，并且在使用它时遇到了一些麻烦。 它只能在root（home）页面和其他一些页面上运行正常，但不能在完整站点上运行。

.button-collapse失去了功能，菜单不起作用。 我只需点击它，或点击（在移动设备中），没有任何反应。 有时它在页面刷新后有效，有时则不然。 总是点击.button-collapse到网址后添加#! 最后（它在逻辑上是可以理解的），除了root（home）页面。 我认为这可能是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>

Answer 1

当我在我的Rails项目中使用turbolink时，我需要一种方法来处理它们。 只需添加jquery.turbolinks gem和这段代码： //= require jquery.turbolinks JavaScript清单文件中的//= require jquery.turbolinks解决问题。 此外，通过添加以下内容可以轻松解决此问题：

$(document).on('ready page:change', function() {
  Waves.displayEffect(); // Initialize buttons wave effects
 $(".button-collapse").sideNav(); // Initialize collapse button
});