2016-03-28 7 views
1

jQueryを使用してMaterialize CSSをApacheコードでビルドするときに問題があります。Apache CordovaのCSS sidenavをマテリアライズする

Uncaught TypeError: $(...).sideNav is not a function

のindex.html本体:

<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> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript" src="scripts/script.js"></script> 
    <script type="text/javascript" src="scripts/materialize.js"></script> 
     <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
     <script type="text/javascript" src="scripts/index.js"></script> 

script.js:

$(".button-collapse").sideNav(); 
+0

グラブマテリアライズ[リンク](からのinitハックhttp://materializecss.com/templates/starter-template/ js/init.js)そして、それが私のJSで最後に呼び出されたことを確認しました。 JSの残りの部分の前に置くと失敗する。それが働いたら教えてください。 – nanilab

+0

script.jsをmaterialize.jsの下に置く – Raymond

+0

@レイモンドは解きました!答えを – MucaP

答えて

0
このことから、あなたのコードを変更

<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> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript" src="scripts/script.js"></script> 
    <script type="text/javascript" src="scripts/materialize.js"></script> 
     <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
     <script type="text/javascript" src="scripts/index.js"></script> 

この目的のために:

<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> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript" src="scripts/materialize.js"></script> 
    <script type="text/javascript" src="scripts/script.js"></script> 
     <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
     <script type="text/javascript" src="scripts/index.js"></script> 
0

jsbin demoそれはこの作品に見えるクロームコンソールがいることを述べています。

+0

にしてください。私はちょうどあなたがjsFiddleを使うべきだと思っています。読んだり書いたりするほうがいいですね。 – MucaP

関連する問題