在 Django 项目中使用 Zurb Foundation 6 javascript

Question

我有一个现有的Django项目，我想使用Zurb Foundation(确切地说是版本6.4.2(。我从文档中认为，您可以只引用CDN或将相关文件下载到静态文件夹并从那里引用它们。我已经通过

<link rel='stylesheet' href="{% static 'foundation/css/foundation.min.css' %}" type='text/css' />
<script src="{% static 'foundation/js/vendor/jquery.js' %}"></script>
<script src="{% static 'foundation/js/vendor/what-input.js' %}"></script>
<script src="{% static 'foundation/js/vendor/foundation.min.js' %}"></script>
<script>
$(document).foundation();
</script>

css 似乎按预期工作，但是 javascript 似乎根本不起作用。当我粘贴一个片段时，在这里输入链接描述，说

<p><a data-toggle="menuBar" aria-expanded="false" aria-controls="menuBar">Expand!</a></p>
<ul class="menu" id="menuBar" data-toggler=".expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>

什么也没发生。菜单将加载，但菜单不会像在链接的文档页面中那样展开。我是否没有引用正确的文件，或者我是否需要安装或加载我没有提到的任何内容？或者这是一个 Django 问题，如果是这样，是否有解决方法？

Answer 1

如果是简单的 JQuery。我认为将其放在底部只是最佳做法，但由于您已经使用了$(document).foundation();因此必须加载页面以初始化页面上使用的基础插件。本质上，如果页面/DOM 上不存在 x，则不能将 x 变为红色。

初始化基础

包含基础 JavaScript 后，只需添加一个简单的调用即可初始化页面上的所有插件。

我们建议您在页面末尾初始化基础。

.HTML

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

取自 https://foundation.zurb.com/sites/docs/v/5.5.3/javascript.html 但已经过时，因为当前版本是 6.6.2