Question

我想将基金会的下拉按钮（例如：http://foundation.zurb.com/docs/components/dropdown-buttons.html）添加到我的网站，使用“data-dropdown”属性将其链接到列表，如文档页面中所述。底部。下拉列表有效 - 然而，当我点击按钮时（例如按钮下方300px），列表会以某种方式下降太多了。

我甚至试图在空白页面上隔离按钮或没有我所有的自定义设置和样式，没有运气。我将最新的Foundation 4.0.5安装为gem。有没有人对这个版本的基金会有同样的问题？或者doc-example中是否存在语法错误？我复制+粘贴了这段代码片段：

<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

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

从我的实验中，可以在一行内定义下拉列表而不会出现问题。这些列似乎导致了这个问题。

Zurb Foundation下拉按钮菜单下降太多了

1 个答案: