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似乎根本不工作。当我粘贴enter link description here中的代码段时，请说

<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();，因此必须加载该页面才能初始化该页面上使用的Foundations插件。本质上，如果页面/ 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，已经过时了

在Django项目中使用Zurb Foundation 6 JavaScript

1 个答案: