Zurb Foundation 6：ドロップダウンのJSデータオプションの属性が期待通りに機能しない

Question

ZURB Foundation Flexの最新バージョン（cdnjs v6.3.1）を使用しています。私はdropdown JS componentを使用していますが、それは箱からすぐにうまく動作しますが、内蔵のdata-options=""を使用してカスタマイズすることはできません。オプションを検出しないだけです。私がFlexを使用しているので、私はそれが問題であると考えていたので、データオプションを使ってポジションクラスを追加しようとしました。そのオプションも無視されました。ここで

は私のHTMLです：

<nav> 
    <ul class="menu-one"> 
    <li><a href="/" title="">Link 1</a></li> 
    <li><a href="/" title="">Link 2</a></li> 
    <li><a data-toggle="link-three">Link 3</a></li> 
    </ul> 
    <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="data-v-offset: 300px; data-h-offset: 300px;"> 
    <ul class="menu-two"> 
     <li><a href="" title="">Link 3 A</a></li> 
     <li><a href="" title="">Link 3 B</a></li> 
     <li><a href="" title="">Link 3 C</a></li> 
    </ul> 
    </div> 
</nav> 

そして、基本的なJavaScriptの：

$(document).foundation(); 

私も運と6.3.0でそれをテストしていると私はこれがあると信じています私が間違ってやっていること、またはこれがフレックスでサポートされていない可能性があるため、バグか、最も可能性の高いものです。

JsFiddle：

私はjsFiddleを作った答えるためにStackOverflowのコミュニティのための物事を容易にします。

Answer 1

これは完全に文書化されていませんが、data-options属性を使用する場合は、ハイフンと "データ"を削除するオプションの形式を変更する必要があります。基本的にdata-v-offset ==>vOffset

<nav> 
    <ul class="menu-one"> 
    <li><a href="" title="">Link 1</a></li> 
    <li><a href="" title="">Link 2</a></li> 
    <li><a data-toggle="link-three">Link 3 (Dropdown)</a></li> 
    </ul> 
    <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="vOffset:300; hOffset:300;"> 
    <ul class="menu-two"> 
     <li><a href="" title="">Link 3 A</a></li> 
     <li><a href="" title="">Link 3 B</a></li> 
     <li><a href="" title="">Link 3 C</a></li> 
     <li><a href="https://simonhayter.co.uk" title="Simon Hayter">SimonHayter.co.uk</a></li> 
    </ul> 
    </div> 
</nav> 

は

Vague documentation, you have to read between the linesJSFiddleを更新しました。