在 Django 项目中使用 Zurb Foundation 6 javascript答案

【问题标题】：Using Zurb Foundation 6 javascript in a Django project在 Django 项目中使用 Zurb Foundation 6 javascript
【发布时间】：2025-12-26 08:20:08
【问题描述】：

我有一个现有的 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 似乎根本不起作用。当我从说 enter link description here 粘贴一个 sn-p 时，说

<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 问题，如果是，是否有解决方法？

【问题讨论】：

所以一旦我将引用一直移动到 body 标记的底部，问题就解决了，因为这就是包含的 index.html 页面的样子。这似乎已经解决了问题，现在一切都按预期工作。这是怎么回事？为什么会这样？

标签： django zurb-foundation

【解决方案1】：

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

初始化基础

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

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

HTML

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

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

【讨论】：