jquery - 数据选项 ="is_hover:true"不适用于 Foundation 5.2.2

Question

我在 Foundation 版本 5.2.2 上有一组垂直选项卡。代码看起来像这样:

<div id="projects" data-dropdown-content class="f-dropdown content">
  <h6>Gestión de proyectos</h6>
  <dl class="tabs vertical projects-tabs" data-tab data-options="is_hover:true">
    <dd class="active"><a href="#panel1a">Tab 1</a></dd>
    <dd><a href="#panel2a">Tab 2</a></dd>
    <dd><a href="#panel3a">Tab 3</a></dd>
    <dd><a href="#panel4a">Tab 4</a></dd>
  </dl>
  <div class="tabs-content vertical">
    <div class="content active" id="panel1a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
    <div class="content" id="panel2a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="content" id="panel3a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
    <div class="content" id="panel4a">
      <ul class="projects-tabs-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </div>
  </div>
</div>

这个想法是在悬停选项卡时显示每个选项卡的内容，但是当我在它们上设置 data-options="is_hover:true"时，它就不起作用。我检查了 Foundation.tab.js 以查看是否一切正常并且一切似乎都正常。正如您在 this link 中看到的那样, 最近添加了对选项卡的 is_hover 支持。

你知道为什么这不起作用吗？提前致谢!

Answer 1

一旦我从外部 div 中删除了 f-dropdown 类，我就能让你的示例正常工作。您可以在这里看到我的工作示例，http://cdpn.io/zgtkG .

如果您不熟悉 CodePen，底部有一个名为编辑此笔的链接/按钮。进入编辑器后，您可以单击 JS 和 CSS 旁边的齿轮图标来查看我对 Foundation 5.2.2 的引用。

希望对您有所帮助，-亚当