物化移动导航栏无响应

时间:2017-01-18 20:08:12

标签: jquery html css ruby-on-rails materialize

我使用Materialise和Rails项目,我不确定为什么可折叠导航栏转换没有响应。

_nav.html.erb

<nav>
<div class="nav-wrapper">
  <a href="/" class="brand-logo center">LOGO</a>
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul id="nav-mobile" class="left hide-on-med-and-down">
    <li><%= link_to "Signup", new_user_registration_path %></li>
    <li><%= link_to "Logout", destroy_session_path(current_user) if current_user %></li>
  </ul>

  <ul class="side-nav" id="mobile-demo">
    <li><%= link_to "Signup", new_user_registration_path %></li>
    <li><%= link_to "Logout", destroy_session_path(current_user) if current_user %></li>
  </ul>
</div>

community.js

$(document).ready(function(){
  $(".button-collapse").sideNav();
)};

现在,如果我缩小视口并单击移动菜单按钮,屏幕会显示灰色叠加,但实际的侧边栏本身不会出现。我检查了元素,并将我的版本与Materialize网站上的演示版本进行了比较,看起来无论出于何种原因,某些CSS组件都在我身边呈现错误。

首先在标签中,宽度不在我身边调整。 Screenshot

其次,我身边的风格显示为左边,而原始的Materialise版本即将变为转换。 Screenshot2

除了更改font-family之外,我没有修改任何css。它在几天前工作,但现在它没有。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

解决。我在cdnjs中调用Materialize.min.js文件。当我切换到使用inminified版本(https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js)时,一切都很完美。