我想从 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>
感谢您的帮助!
- 彼得
最佳答案
几天前我遇到了同样的问题。在我看来,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 之外定义的,它会正确显示。
根据我的实验,可以毫无问题地在行内定义下拉菜单。似乎是导致问题的列。
关于javascript - Zurb Foundation 下拉按钮菜单下降太多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15372745/