ファンデーション6のオフキャンバスが動作しない

私はファンデーション6のオフキャンバスの機能を動作させようとしています。この時点で、私は現在、Zurb自身のサンプルを自分のドキュメント（http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example）から取り出そうとしています。ファンデーション6のオフキャンバスが動作しない

キャンバスを開くボタンをクリックすると、何も起こりません。滑り止めなし、フェーディングなし、無し。

foundation.jsがページに含まれていることを確認しました。イベントハンドラがボタンにバインドされていることがわかります。

アイデア？前もって感謝します！

HTMLソース：あなたは財団JSを初期化されていないため、

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Home | LearnLojban</title> 
    <link href="https://fonts.googleapis.com/css?family=Merriweather:700,700i|Pangolin|Signika&amp;subset=latin-ext" rel="stylesheet"> 
    <link rel="stylesheet" href="static/styles/styles.css" /> 
    </head> 
    <body> 

    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
     <!-- Close button --> 
     <button class="close-button" aria-label="Close menu" type="button" data-close> 
     <span aria-hidden="true">&times;</span> 
     </button> 

     <!-- Menu --> 
     <ul class="vertical menu"> 
     <li><a href="#">Foundation</a></li> 
     <li><a href="#">Dot</a></li> 
     <li><a href="#">ZURB</a></li> 
     <li><a href="#">Com</a></li> 
     <li><a href="#">Slash</a></li> 
     <li><a href="#">Sites</a></li> 
     </ul> 
    </div> 

    <div class="off-canvas-content" data-off-canvas-content> 
     <button type="button" class="button" data-toggle="offCanvas">Open Menu</button> 
    </div> 

    <script src="static/js/vendor/jquery.js"></script> 
    <script src="static/js/vendor/what-input.js"></script> 
    <script src="static/js/vendor/foundation.js"></script> 

    </body> 
</html>

出典

2017-02-09 MadEmperorYuri

@AlexanderStaroselskyのドキュメント –

の例であっても、HTMLを共有してください。 HTMLが追加されました。 – MadEmperorYuri

私の答えを参照してください。ありがとう！ –

オフキャンバスが働いていない理由はあります。

<script src="js/vendor/jquery.min.js"></script> 
<script src="js/vendor/what-input.min.js"></script> 
<script src="js/foundation.min.js"></script> 
<script> 
    $(document).foundation(); 
</script>

ここで基本的なオフキャンバスとjsfiddleです：jQueryの.ready()たりindex.htmlあなたがinstallation documentation example

$(document).ready(function(){ 
    $(document).foundation(); 
});

ORあたり$(document).foundation();を呼び出す必要があるの<script>要素後のいずれかで

たとえば、$(document).foundation()が呼び出され、ready()を使用して機能する機能があります。

ここにjsfiddleがあり、$(document).foundation()が呼び出されていないとすぐに機能が失敗していることがわかります。

すべてのスクリプトがロードされた後に$(document).foundation()に電話をかけてください。キャンバスやその他の機能を起動して実行できるはずです。

特定の要素をターゲットにするには、その要素のfoundation()を呼び出します。

$('#foo').foundation(); // initialize all plugins within the element `#foo`

jsfiddle特定の要素をターゲティングすることを実証しています。

うまくいけば助けてください！

出典

2017-02-09 04:59:16

それはそれでした。ありがとう！私はインストールのドキュメントを検討することは考えていませんでした。 – MadEmperorYuri

-1

私は数週間、オフキャンバスナビゲーションを実装しようとしていました。私はついに解決策を見つけました。

提供されたjsファイルのどれもオフキャンバスメニューをトリガしなかったので、オフサイトが完璧に機能しているため、ドキュメントサイトでFoundationのJSファイルを使用することにしました。

これらは私が使用する3つのスクリプトは、以下のとおりです。

<script src="http://foundation.zurb.com/sites/docs/assets/js/vendor.js?hash=eceb3a0cb6a9a3f95854c532a6ebbd81"></script> 

<script src="http://foundation.zurb.com/sites/docs/assets/js/foundation.js?hash=b679e2177e3de7e04f4c100d03af1ad3"></script> 

<script src="http://foundation.zurb.com/sites/docs/assets/js/docs.js?hash=9adc0ae1222c4567178bb0cc7f704ec5"></script>

ホープ、このことができます！

出典

2017-03-21 19:55:15

ファンデーション6のオフキャンバスが動作しない

答えて

関連する問題