基金會因爲某種原因不被認可

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>