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。