实例化侧边导航不会显示



我正在尝试学习Materialize,但是当我单击菜单按钮时,我无法显示侧边导航。我认为这与初始值设定项有关。

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

sidenav()函数未定义。你应该试试这个

<script>
$(document).ready(function(){
$('.sidenav-trigger').click(function(){
$('#mobile-demo').removeClass("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>

最新更新