Zurb基金會6：如預期

Question

我使用的是最新版本的ZURB基金會的Flex與（cdnjs v6.3.1）下拉JS數據選項屬性不工作。我使用的作品精絕開箱的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，我也認爲這是無論是錯誤還是最可能的東西，我做錯了，或者只是因爲這可能不支持flex。

的jsfiddle：

爲了使事情的StackOverflow社區回答我做了一個jsFiddle容易。

Answer 1

它沒有很好的記錄，但您必須在使用data-options屬性時更改選項的格式以刪除連字符和「data-」。基本上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> 

更新JSFiddle

Vague documentation, you have to read between the lines。