jquery - Materialise 移动导航栏没有响应

标签 jquery html css ruby-on-rails materialize

我在 Rails 元素中使用 Materialize,我不确定为什么可折叠导航栏转换没有响应。

_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>

社区.js

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

现在,如果我缩小视口(viewport)并单击移动菜单按钮,屏幕会出现灰色覆盖,但不会显示实际的边栏本身。我检查了元素并将我的版本与 Materialise 网站上的演示版本进行了比较,看起来某些 CSS 组件出于某种原因在我这边呈现不正确。

首先在标签中,我这边的宽度没有调整。 Screenshot

其次,我这边的样式显示为左侧,而原始的 Materialize 版本显示为变换。 Screenshot2

除了更改字体系列外,我没有修改任何 css。几天前它还在工作,但现在没有了。有帮助吗?

最佳答案

已解决。我正在从 cdnjs 调用 Materialize.min.js 文件。当我切换到使用缩小版本 (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js) 时,一切都运行良好。

关于jquery - Materialise 移动导航栏没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41728542/

相关文章:

jquery - 向表格单元格添加箭头

jquery - 在 li 标签上添加 skype 的微笑作为要点

Jquery替换所有以#开头的字符串并添加链接

javascript - 防止某些 HTML 元素被复制

css - CSS网格:语义的重要性

javascript - float 标签和 Javascript 切换 HTML 和 CSS 的问题

javascript - 我如何使用 jQuery 获取页面内容并将其呈现在 div 中?

html - 如何防止动画在无限次运行时返回到原始状态?

python - 使用 WAMP 和 HTML 使用 Python 进行 CGI 编程

javascript - 当元素到达视口(viewport)顶部时将数据类型值设置为元素