【问题标题】:Materialize CSS side-nav not working物化CSS侧导航不起作用
【发布时间】:2015-12-03 00:45:22
【问题描述】:

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

这是我的代码。菜单:

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

使用其他 JS 功能,下拉菜单和模式都有效。对于为什么 sideNav 先生不合作感到困惑。

有什么想法吗?

【问题讨论】:

    标签: javascript material-design materialize


    【解决方案1】:

    我找到了解决方案。我从 Materialize:http://materializecss.com/templates/starter-template/js/init.js 获取了 init hack,然后确保它最后一次在我的 JS 中被调用。 (将它放在 JS 的其余部分之前会导致它失败。)

    【讨论】:

    • 这完全取决于你的脚本文件的顺序!您必须在加载 jQuery 和 Materialize 库之后运行您的代码......我使用自定义异步加载和回调进行优化
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-03-31
    • 2018-04-05
    • 1970-01-01
    • 2018-04-10
    • 1970-01-01
    • 2023-03-04
    • 1970-01-01
    相关资源
    最近更新 更多