基础下拉按钮样式不正确

Foundation Dropdown Button Not Styling Correctly

本文关键字：样式 不正确 按钮      更新时间：2023-09-26

我无法让我的基础下拉按钮工作(似乎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>

结果是:

https://i.stack.imgur.com/FFt6k.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角色和类以及button元素。

相关文章：