Zurb Foundation 6：下拉 JS 数据选项属性未按预期工作

Question

我正在使用最新版本的 ZURB Foundation Flex 和 (cdnjs v6.3.1). I am using the dropdown JS component 它开箱即用，但我无法使用内置的 data-options="" 对其进行自定义，它根本不是完全检测选项。因为我使用的是 Flex，所以我认为这是一个问题，所以我尝试使用数据选项添加一个位置 class，但该选项也被忽略了。

这是我的 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:

为了让 Whosebug 社区更容易回答问题，我做了一个 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.

Zurb Foundation 6：下拉 JS 数据选项属性未按预期工作

Zurb Foundation 6: Dropdown JS data-options attribute not working as expected

jquery

drop-down-menu

zurb-foundation

zurb-foundation-6