实现CSS侧导航不起作用 [英] Materialize CSS side-nav not working

问题描述

我有一个Materialise运行的基本设置，一切似乎都很好，除了滑出侧导航。

I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.

这是我的代码。菜单：

<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输出中没有报告错误。

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.

使用其他JS函数，下拉菜单工作，模态工作。难以为什么sideNav先生不合作。

With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.

任何想法？

推荐答案

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

I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.js and then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)

这篇关于实现CSS侧导航不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！