基金会由于某种原因未被认可

Question

我正在尝试在 foundation 中做一个简单的下拉菜单作为测试，只是为了让它出现在页面上。

<a data-dropdown="drop2" aria-controls="drop2" ariaexpanded="false">Has Content Dropdown</a>

<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

我一直遇到错误 TypeError: Cannot read property 'className' of undefined。在调用堆栈中，它在堆栈顶部显示 foundation.js:195。

在我看来 foundation.js 实际上并未正确加载，但鉴于这是我使用它的第一个应用程序，我不太确定。有什么想法吗？

Answer 1

您遇到的问题似乎是由于您正在加载的 foundation.js 版本与您正在学习的教程版本不匹配。

如果您正在关注 tutorial for foundation.js 5.5.3, be sure that the script you're referencing is 5.5.3, whether that be through a CDN 或本地副本。

您看到的关于 undefined 的 className 的错误是由 foundation.js 中存在于 v6.0.0 之后的以下行引发的。

var horizontalPosition = /float-(\S+)\s/.exec(this.$anchor[0].className);

有问题的 $anchor 是一个 jQuery 对象，其选择器匹配具有 data-toggle 或 data-open 的任何元素，匹配下拉列表的 id 属性内容。

下拉菜单的 API 与以前的版本不同，因此不匹配和您的错误。

$(document).foundation();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />

<a data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.dropdown.js"></script>

基金会由于某种原因未被认可

Foundation not being recognized for some reason

javascript

jquery

zurb-foundation