JavascriptコンポーネントがMaterializeで動作しません

Materialize Frameworkを使用したいが、JAVASCRIPTコンポーネントを使用できません。波ボタンは機能しましたが、残りの部分は機能しません。ネットで検索し、最初にjqueryJavascriptコンポーネントがMaterializeで動作しません

これは私のindex.htmlページで、私のinit.jsが

<html> 
    <head> 
     <link rel="stylesheet" href="CSS/materialize.min.css"> 
     <script src="js/jquery.js"></script> 
     <script src="js/materialize.js"></script> 
     <script src="js/init.js"></script> 
    </head> 
    <body> 
     <nav> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <ul id="slide-out" class="side-nav"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
     </nav> 
    </body> 
</html> 


(function ($) { 
    $(function() { 

     // Initialize collapse button 
     $(".button-collapse").sideNav(); 
     // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
     //$('.collapsible').collapsible(); 
     $('.button-collapse').sideNav('show'); 

    }); // end of document ready 
})(jQuery); 
// end of jQuery name space

は、私がmaterialize.jsよりも、最初のjquery.jsを呼ぶが、それは動作していない..ですマテリアライズが、それは私の問題を解決していませんでした。あなたが送信され

出典

2016-06-20 PURUSHOTTAM SHUKLA

コンソールエラー？ – DaniP

フィドルを追加できますか？それは問題を理解するのに役立ちます。 –

あなたのコードをjsfiddleに入れてください。 – iyyappan

コードが働いている：

(function($) { 
    $(function() { 
    // Initialize collapse button 
    $(".button-collapse").sideNav(); 
    // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
    //$('.collapsible').collapsible(); 
    $('.button-collapse').sideNav('show'); 
    }); // end of document ready 
})(jQuery); // end of jQuery name space

https://jsfiddle.net/jzob32ed/

ですから、jqueryのバージョンを使用していますか？実現する？ jqueryと競合する他のフレームワークですか？あなたはあなたの質問にコンソールの出力をダンプできますか？

出典

2016-06-20 14:10:20

私のjqueryのバージョンは1.3.2です –

とマテリアライズのバージョンはv0.97.5です –

私はあなたのjqueryのバージョンは、私はよく実現すると思いますjquery> 2 –

ここでは、ハンバーガーアイコンのトグルでスライドアウトした状態でnavbarの基本構造を説明します。私はjQuery 2.2.0とMaterialize 0.97.5を使用しました。

JSFiddle

Javascriptを：

(function ($) { 
    $(function() { 
    $('.button-collapse').sideNav({ 
     menuWidth: 300, // Default is 240 
     closeOnClick: true 
    ); 
     $('.collapsible').collapsible(); 
    }); 
})(jQuery);

マークアップ（HTML）：

<nav> 
    <ul class="hide-on-med-and-down"> 
    <li><a href="#!">First Sidebar Link</a></li> 
    <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 
    <ul id="slide-out" class="side-nav fixed"> 
     <li class="bold"><a href="#!" class="">First Sidebar Link</a></li> 
     <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> 
    </ul> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
</nav>

希望に役立ちます！

出典

2016-06-20 14:26:49

jqueryのバージョンで問題が発生しましたが、CDNリンクを使用しています。ありがとう –

JavascriptコンポーネントがMaterializeで動作しません

答えて

関連する問題