2015-09-07 23 views
10

私は基本的なマテリアライズの設定をしていますが、サイドナビからのスライドを除いて、すべてがうまくいくようです。Materialize CSSサイドナビが動作しない

ここに私のコードです。メニュー:

<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氏がなぜ協力していないのかを知りませんでした。

アイデア?

答えて

20

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

+0

それはすべてあなたのスクリプトファイルの順序に依存します! jQueryとマテリアライズライブラリがロードされた後にコードを実行する必要があります...私はカスタム非同期ロードを使用してコールバックを最適化します – qdev