javascript - Materialise sidenav 不会出现
问题描述
我正在尝试学习 Materialise,但是当我单击菜单按钮时,我无法让 sidenav 出现。我认为这与初始化程序有关。
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
html正文底部的脚本标签:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
解决方案
它没有初始化 M,Materialize 的全局对象。我从 CDN 更改了 Materialize 的版本并运行了它。我最终不需要 jQuery。
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav, {});
</script>
推荐阅读
- python - 如何使用 go.Histogram 将颜色字典发送到虚线图,以创建不同颜色的图形
- php - PHP 在匹配文本之前提取数字
- amazon-redshift - 如何在最后一次修改表的日期时检查红移?
- python - 如何修复这个无法运行的 Python 代码?
- java - 泛型与继承
- oracle - ORA-12154 Oracle DB Windows 无法连接 SQLPlus
- html - 如何在css中制作动画加载器?
- cassandra - -bash:cqlsh:在cqlsh之外运行cql命令时找不到命令错误
- python - flask_rq, redis, rq 将作业移动到 FailedJobRegistry 主力进程意外终止(waitpid 返回无)
- api - Identity Server 4 Postman 请求令牌不起作用