Materialize CSS 侧边导航无法正常工作

11

我已经成功运行了Materialize的基本设置,除了侧滑导航栏似乎有些问题。

这是我的代码。菜单:

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

当屏幕缩小时,我可以看到适当的汉堡菜单,但是点击汉堡菜单无法展开菜单。网址会更新为一个哈希#,然后就没有其他反应了。我的JS没有报告任何错误。

与其他JS函数不同的是,下拉菜单可以工作并且模态框也可以工作。我不知道为什么Mr. sideNav不合作。

有什么想法吗?

1个回答

22

1
这完全取决于你脚本文件的顺序!在jQuery和Materialize库加载后才能运行代码...我使用自定义异步加载和回调进行优化。 - qdev

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接