Materialise CSS 侧面导航不起作用

2024-04-26

我已经对 Materialise 运行进行了基本设置,除了滑出侧面导航之外,一切似乎都很好。

这是我的代码。菜单:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>

减小屏幕尺寸时,我得到了适当的汉堡菜单,但是,单击汉堡并不会展开菜单。 URL 使用哈希值 # 进行更新,仅此而已。我的 JS 输出中没有报告错误。

对于其他 JS 函数,下拉菜单和模式都可以工作。很困惑为什么 sideNav 先生不合作。

有任何想法吗?


我找到了解决方案。我从 Materialise 获取了 init hack:http://materializecss.com/templates/starter-template/js/init.js http://materializecss.com/templates/starter-template/js/init.js然后确保它是在我的 JS 中最后调用的。 (将其放在 JS 其余部分之前会导致其失败。)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Materialise CSS 侧面导航不起作用 的相关文章

  • 如何在MVC中将整套模型附加到formdata并获取它

    如何通过formdata传递一整套模型对象并将其转换为控制器中的模型类型 以下是我尝试过的 JavaScript 部分 model EventFromDate fromDate EventToDate toDate ImageUrl img
  • nodeJS require.paths 解决问题

    我试图相对且神秘地需要一个文件 以下情况正在发生 这很有效 这表明 Users marcos Desktop Taper lib utils js myPath Users marcos Desktop Taper lib utils re
  • 是否可以实现异步跨域文件上传?

    有可能的 参见下文 首先我用这张图来解释一下异步文件上传可以实现 对不起 我已经关闭了我的一个域 该图像现在消失了 不过 这确实是一个很好的图像 这是在我发现 Stack Overflow 可以通过 Imgur 上传图像之前 正如您所看到的
  • JavaScript 和数据库连接

    javascript可以直接访问数据库吗 我觉得我的问题是反问 因为这是一个安全问题 但这有可能吗 有可能的 有了新的html5功能 js可以通过WebSql连接 一个活生生的例子 http html5demos com database
  • JavaScript 闭包与匿名函数

    我和我的一个朋友目前正在讨论 JS 中什么是闭包 什么不是 我们只是想确保我们真正正确地理解它 我们以这个例子为例 我们有一个计数循环 想要在控制台上延迟打印计数器变量 因此我们使用setTimeout and closures捕获计数器变
  • 如何防止脚本注入攻击

    Intro 这个话题一直是 StackOverflow 以及许多其他技术论坛上许多问题和答案的祸根 然而 其中大多数都是特定于具体条件的 甚至更糟 通过脚本注入预防中的 整体 安全性dev tools console or dev tool
  • Javascript:无法停止setTimeout

    我正在开发一个代理服务器检查器 并使用以下代码使用 setTimeout 函数以大约 5 秒的间隔启动请求 function check var url document getElementById url value var proxy
  • SVG/XML 中有一些innerHTML 替代品吗?

    在 HTML 中 我可以通过提供字符串形式的模板来构建一个简单的模板系统 替换其中的某些部分 然后使用innerHTML到某个容器 var templ span myText span var newContent templ replac
  • AngularJS:如何在 AngularJS 中使用或注入第三方库

    我是 Angular 和 Deployd 的新手 想知道如何一起使用它们 我发现 Deployd 网站中的示例很好 但它只消耗其余 API 数据 我想了解如何将 Deployd 作为 AngularJS 中的服务 例如 通过部署中可用的收集
  • 在没有事件的情况下从 HTML 执行 javascript 函数

    我希望从 HTML 页面调用 javascript 函数 并且我do not希望它依赖于任何事件 该函数位于单独的 js 文件中 因为我希望在许多网页中使用它 我也将变量传递给它 我试过这个 HTML fp footer2 js中的函数 f
  • 单击按钮时执行 python 脚本

    我有一个带有一个按钮的 HTML 页面 当我们单击该按钮时 我需要执行一个 python 脚本 并返回到包含结果的同一 HTML 页面 所以我需要对返回值进行一些验证并执行一些操作 这是我的代码 HTML
  • 使用 ChartJS v2.0 自定义图例

    我正在尝试在 ChartJS v2 0 中创建自定义图例模板 在 ChartJS v1 中 我只是向新的 Chart 构造函数添加了一个属性 例如 legendTemplate ul li span style background col
  • 在 JavaScript 中将整数数组转换为字符串数组

    我有一个如下所示的数组 var sphValues 1 2 3 4 5 然后我需要转换上面的数组 如下所示 var sphValues 1 2 3 4 5 我怎样才能转换 我用它来自动完成 您可以使用map https developer
  • 避免使用 Grunt cssmin 任务来删除重复条目

    在我的 Gruntfile 中 我使用 cssmin grunt contrib cssmin 任务 就像是 cssmin css src dist styles css dest dist styles min css 问题是 style
  • JSON 和 AJAX 与 jQuery 有什么区别?

    我听说 JSON 会序列化所有数据 这可以防止我在跨浏览器支持等方面遇到客户端问题 我一直在使用 AJAX 和 jQuery 这看起来很简单 但我不确定其中的区别 我读过我也可以使用它来获取数据 ajax url url dataType
  • 无法定义 set 和 get 方法

    尝试使用访问器定义属性时出现错误 这是我的代码 var person Object defineProperty person birthYear value 1997 writable true enumerable true confi
  • 从 BLOB 打印 PDF

    我从外部 API 获取 PDF 文件 使用此代码我可以正确下载该文件 var req new XMLHttpRequest req open POST url true req responseType blob req setReques
  • 使用 JavaScript 在空闲时隐藏鼠标光标

    是否可以使用JavaScript来设置cursor属性的属性none如果鼠标在一定时间内处于非活动状态 例如五秒 请将其设置回auto当它再次活跃时 EDIT 我意识到none不是有效值cursor财产 尽管如此 许多网络浏览器似乎都支持它
  • 将 csv 解析输出保存到变量

    我是使用 csv parse 的新手 项目 github 中的这个示例满足了我的需要 但有一个例外 我不想通过 console log 输出 而是想将数据存储在变量中 我尝试将 fs 行分配给变量然后返回data而不是记录它 但这只是返回了
  • jQuery fullCalendar + Fancybox 弹出窗口编辑事件

    我正在使用此代码在 fullCalendar 上生成事件

随机推荐