javascript - Materializecss 菜单仅在一页上工作正常

Question

我在 Rails 应用程序中使用 materialize-sass gem，但在使用时遇到了一些问题。它仅在根(主页)页面以及其他一些页面中运行良好，但在整个站点上则不然。

.button-collapse 失去功能并且菜单不起作用。我只是点击它，或点击(在移动设备中)，但没有任何反应。有时刷新页面后可以使用，有时则不行。单击 url 的 .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>

Answer 1

当我在 Rails 项目中使用 Turbolink 时，我需要一种方法来处理它们。只需添加 jquery.turbolinks gem 和 JavaScript list 文件中的这段代码: //= require jquery.turbolinks 解决了这个问题。还有很多简单方法可以通过添加以下内容来解决此问题:

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