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中测试了它没有运气，我确实认为这是一个错误，或者很可能是我做错了或只是因为flex可能不支持。

的jsfiddle：

为了让StackOverflow社区更容易回答，我已经制作了jsFiddle。

Answer 1

没有太多文件记录，但您必须更改选项的格式以删除连字符和＆＃34;数据 - ＆＃34;使用data-options属性时。基本上data-v-offset ==＆gt; 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数据选项属性无法按预期工作

1 个答案: