基金会因为某种原因不被认可

Question

我想在基金会做一个简单的下拉菜单作为测试只是为了让它在页面上。

<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，请确保您所引用的脚本是5.5.3，无论是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>