Materializecss菜单仅在一页

时间:2015-11-07 19:13:27

标签: javascript jquery ruby-on-rails materialize

我在我的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>

1 个答案:

答案 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
});