基金会由于某种原因未得到承认

Question

我试图在基础上做一个简单的下拉菜单，并将以下内容作为测试，以便将其放在页面上。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

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

如果您关注tutorial for foundation.js 5.5.3，请确保您引用的脚本是5.5.3，无论是through a CDN还是本地副本。

className中undefined的{​​{1}}引发的错误是由foundation.js中的v6.0.0以后的行引发的。

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

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

下拉列表的API在以前的版本中有所不同，因此不匹配和您的错误。

＆＃13;

＆＃13;

$(document).foundation();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;