我的 Foundation 下拉按钮无法正常工作(似乎 CSS 加载不正确)。我已经尝试了多种实现按钮的方法，包括以下代码，这些代码或多或少是从 Foundation 网站上剪切和粘贴的:
<!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
(我没有足够的声誉直接发布图片 - 抱歉)
需要说明的是，我已确保链接正确无误，并且还尝试使用 CDN，以确保这不是链接问题。
Chrome 控制台没有抛出任何错误，gulp 也一样。
谁知道我做错了什么？
最佳答案
您的按钮在您的代码中是一个 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 Angular 色和类以及按钮元素。
关于javascript - 基础下拉按钮样式不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32419726/