Zurb Foundationを使用しているときにカスタムJavaScriptを組み込む正しい方法

Question

今、自分自身のjQueryをFoundationプロジェクトに追加しようとしているときに何度も問題に遭遇しました。

これは、Foundationが「競合なし」を使用する方法と関係がありますか？独自のスクリプトを追加する正しい手順は何ですか？

foundation.min.jsの呼び出し後にscripts.jsファイルを呼び出そうとしましたが、いくつかの非常に単純なslideToggle呼び出しが全く実行されていません。しかし、foundation.min.jsへの参照を削除すると、すべて正常に動作します。

私は外部スクリプトファイルにも問題がありました。

ヒント？ありがとうございました。

Answer 1

私は自分のカスタムjsスクリプトを、bodyタグの前と$（document）.foundation（）;の前にスクリプトのリストの最後に追加しました。私はjs/vendorディレクトリにも格納しました。私のペーストでは、すべてをグローバルディレクトリに保存しました。あなた自身のjsディレクトリを探してください。

<script src="global/js/vendor/jquery.js"></script> 
<script src="global/js/foundation/foundation.js"></script> 

<script src="global/js/foundation/foundation.alerts.js"></script> 

<script src="global/js/foundation/foundation.clearing.js"></script> 

<script src="global/js/foundation/foundation.cookie.js"></script> 

<script src="global/js/foundation/foundation.dropdown.js"></script> 

<script src="global/js/foundation/foundation.forms.js"></script> 

<script src="global/js/foundation/foundation.joyride.js"></script> 

<script src="global/js/foundation/foundation.magellan.js"></script> 

<script src="global/js/foundation/foundation.orbit.js"></script> 

<script src="global/js/foundation/foundation.placeholder.js"></script> 

<script src="global/js/foundation/foundation.reveal.js"></script> 

<script src="global/js/foundation/foundation.section.js"></script> 

<script src="global/js/foundation/foundation.tooltips.js"></script> 

<script src="global/js/foundation/foundation.topbar.js"></script> 

<!-- My Custom Script!!!! --> 
<script src="global/js/vendor/custom.js"></script> 

<script> 
    $(document).foundation(); 
</script> 
</body> 
</html> 

あなたはZurb Foundation 4を使用しているかどうかは言及していません。その場合は、protoコールを理解していないブラウザを除いて、デフォルトでZepto（jQueryの代わりに）を使用していることに注意してください。 jQuery関数がうまくいかない場合は、jQueryの代わりにZeptoを設定してテストするコードをコメントアウトすることができます。また、文書の下部に、次を探します。

<script> 
document.write('<script src=' + 
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') + 
'.js><\/script>') 
</script> 

でそれを置き換えます。その後、

<!-- <script> 
document.write('<script src=' + 
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') + 
'.js><\/script>') 
</script> --> 

<script src="global/js/vendor/jquery.js"></script> 

し、適切なフォルダにjquery.jsを保存するようにしてください。ここでも、私はファイルを/ globalディレクトリに保存しています。

希望に役立ちます！