web-dev-qa-db-ja.com

マテリアライズCSSサイドナビゲーションが機能しない

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>

画面サイズを縮小すると適切なハンバーガーメニューが表示されますが、ハンバーガーをクリックしてもメニューが展開されません。 URLはハッシュ＃で更新され、それだけです。 JS出力にエラーが報告されていません。

他のJS関数では、ドロップダウンメニューが機能し、モーダルが機能します。 sideNav氏が協力していない理由に困惑。

何か案は？

javascriptmaterial-designmaterialize
11
Sheldon Scott

解決策を見つけました。 Materializeからinitハックを取得しました： http://materializecss.com/templates/starter-template/js/init.js そして、それを確認しました私のJSで最後に呼ばれました。 （残りのJSの前に置くと失敗します。）

22
Sheldon Scott