javascript - Zurb Foundation 下拉按钮菜单下降太多

Question

我想从 Foundation 添加一个下拉按钮(如这些:http://foundation.zurb.com/docs/components/dropdown-buttons.html)到我的站点，使用“data-dropdown”属性将其链接到列表，如底部文档页面中所述。下拉菜单有效 - 但是，当我单击按钮时，列表以某种方式下降太多(例如按钮下方 300 像素)。

我什至尝试将按钮隔离在空白页面上，或者没有我所有的自定义设置和样式，但没有成功。我安装了最新的 Foundation 4.0.5 作为 gem。有人对这个版本的 Foundation 有同样的问题吗？或者文档示例中是否存在语法错误？我完全复制并粘贴了这个代码片段:

<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>

<ul id="drop1" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

感谢您的帮助!

• 彼得

Answer 1

几天前我遇到了同样的问题。在我看来，Foundation 4 中的新下拉列表类在 div.columns 元素中表现不佳。请考虑以下事项:

<div class="row">
  <div class="large-6 columns">
    <ul class="inline-list">
      <li>
        <a href="#" class="button dropdown" data-dropdown="drop1">No Good</a>
        <ul id="drop1" class="f-dropdown">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li><a href="#" class="button dropdown" data-dropdown="drop2">Much Better</a></li>
    </ul>
  </div>
</div>
<ul id="drop2" class="f-dropdown">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

在此示例中，'drop1' 定义在'large-6 columns' div 内，当单击相应的按钮时，它会显示在按钮的下方，正如您所描述的。相反，“drop2”是在 div.columns 之外定义的，它会正确显示。

根据我的实验，可以毫无问题地在行内定义下拉菜单。似乎是导致问题的列。