0

我想将 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>

谢谢您的帮助！

  • 彼得
4

1 回答 1

3

几天前我遇到了同样的问题。在我看来，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 之外定义的，它会正确显示。

根据我的实验，下拉列表可以在一行内定义而不会出现问题。似乎是导致问题的列。

于 2013-03-13T04:24:36.783 回答