基础下拉按钮样式不正确

Question

我无法让我的 Foundation 下拉按钮工作（似乎 CSS 没有正确加载）。我已经尝试了各种实现按钮的方法，包括以下代码，这些代码或多或少是从基金会网站上剪切和粘贴的：

<!doctype html>
<html class="no-js" lang="en"> 
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
  <body>
<div href="#" class="large button dropdown">
  Dropdown Button
  <ul>
    <li><a href="#">Dropdown Item</a></li>
    <li><a href="#">Another Dropdown Item</a></li>
    <li class="divider"></li>
    <li><a href="#">Last Item</a></li>
  </ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script>
  $(document).foundation();
</script>
</body>
</html>

最终的样子是：

http://i.imgur.com/QZvHKDW.png

（我没有足够的声誉直接 post 图片 - 抱歉）

需要说明的是，我已确保链接正确无误，并且还尝试使用 CDN，以确保这不是链接问题。

Chrome 控制台没有抛出任何错误，与 gulp 相同。

有人知道我做错了什么吗？

Answer 1

您的按钮在您的代码中是一个 div，但 Foundation 文档将其作为按钮元素（检查此页面上的第一个下拉按钮以查看其是否正常工作：http://foundation.zurb.com/docs/components/dropdown_buttons.html）：

<button data-dropdown="drop" aria-controls="drop" aria-expanded="true" class="tiny button dropdown">Dropdown Button</button>

我想如果你调整你的按钮以匹配上面的按钮，它就会起作用。 Foundation 的 javascript 需要 aria 角色和类以及按钮元素。

基础下拉按钮样式不正确

Foundation Dropdown Button Not Styling Correctly

html

javascript

css

jquery

zurb-foundation