javascript - Foundation 和 WordPress Javascript 之间的兼容性

Question

我正在创建一个 WordPress 主题。我使用 Zurb 的 Foundation 作为框架完成了设计。一切都进展顺利，直到我遇到了我认为是 Javascript 的障碍。

请看这里:

http://dev.andrewtanner.me/wordpress/

两个问题:

• header 图像(特别是“Napier”一词)未在固定导航顶栏下方呈现。

• 当缩小到较小的设备时，我希望单击汉堡包会调用菜单，但这种情况并未发生。

您可以在此处查看设计(只是框架，没有其他内容):

http://dev.napiercountryfestival.co.nz/ - 这里没有任何问题，所以 JS 等都很好。

我确实相信这个问题出在 JS 上，因为当我使用开发工具时，我遇到了两个错误:

• Uncaught TypeError: undefined is not a function
• Uncaught ReferenceError: foundation is not defined

我知道 Foundation 依赖 JS 来处理导航栏中的元素，特别是如果它像我的那样是固定的。

我想知道如何使用 WordPress 最好地解决这个问题。我已经检查了 Codex 并尝试了他们关于调用位于此处的 JS 的解决方案，但无济于事 http://codex.wordpress.org/Using_Javascript

我还尝试使用 <?php wp_enqueue_script("jquery"); ?> 调用 WordPress 的 jQuery而不是基金会的，但也没有运气——这没有什么区别。难道是我没有在 DOM 中以正确的顺序调用事物吗？

我确实有几个较小的 JS 脚本，一个用于运行选取框，另一个用于位于报头下方的倒计时，并且我没有遇到任何问题(除非我通过尝试消除对 Foundation 的 jQuery 的依赖)让事情正常运转)。

如果您能提供任何帮助，我们将不胜感激 - 谢谢!

Answer 1

将 Foundation 固定为函数很容易。打开您的 app.js 文件并将其重写为如下所示:

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