Zurb基金会6:如预期
问题描述:
我使用的是最新版本的ZURB基金会的Flex与(cdnjs v6.3.1)下拉JS数据选项属性不工作。我使用的作品精绝开箱的dropdown JS component,但我无法使用内置data-options=""
来定制它,它根本就没有检测的选项都没有。由于我使用Flex,我认为这是一个问题,因此我试图使用数据选项添加位置类,并且该选项也被忽略。Zurb基金会6:如预期
这里是我的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:
为了使事情的*社区回答我做了一个jsFiddle容易。
答
它没有很好的记录,但您必须在使用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
布拉沃,谢谢! –