何らかの理由で財団が認識されない

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をフォローしている場合は、through a CDNであるかローカルコピーであるかにかかわらず、参照しているスクリプトが5.5.3であることを確認してください。あなたがundefinedのclassNameについて見ている

エラーが以降v6.0.0に存在するfoundation.js内の次の行によって送出されていました。

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

当該$anchorは、そのセレクタdata-toggle又はdata-openドロップダウンコンテンツのid属性が一致する任意の要素に一致したjQueryオブジェクトです。

以前のバージョンでは、ドロップダウン用の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>