Javascript 物化 CSS 侧导航不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/32439042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize CSS side-nav not working
提问by Sheldon Scott
I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.
我有一个基本的 Materialise 运行设置,除了滑出侧导航之外,一切似乎都很好。
Here's my code. Menu:
这是我的代码。菜单:
<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:
JS:
<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
</script>
I get the appropriate hamburger menu when reducing the screen size, however, clicking the hamburger does not expand out a menu. The URL updates with a hash # and that's it. There are no errors reported in my JS output.
缩小屏幕尺寸时,我会得到相应的汉堡菜单,但是,单击汉堡并不会展开菜单。URL 用哈希 # 更新,就是这样。我的 JS 输出中没有报告错误。
With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.
使用其他 JS 函数,下拉菜单和模式都有效。不明白为什么 sideNav 先生不合作。
Any ideas?
有任何想法吗?
回答by Sheldon Scott
I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.jsand then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)
我找到了解决方案。我从 Materialise 中获取了 init hack:http: //materializecss.com/templates/starter-template/js/init.js,然后确保它最后一次在我的 JS 中被调用。(将它放在 JS 的其余部分之前会导致它失败。)