Question

我想使用Sass mixins在我的网站上添加一个下拉按钮。我已经阅读了关于Javascript的文档并按照我的知识进行了安装，并且我已经阅读了Dropdown按钮上的文档。这是我的HTML：

<a href="#" data-dropdown="drop" class="login">Dropdown Button</a><br>
<ul id="drop" data-dropdown-content 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>

这是我的scss：

 .login {
  @include grid-column(2);
  @include button();
  @include dropdown-button();
}

这里是我的javascript安装:(在关闭body标签之前的html文件末尾，除了我的html文件顶部的modernizr）

<!-- modernizr -->
<script src="/js/custom.modernizr.js"></script>

<!-- jQuery -->
<script src="/js/vendor/jquery.js"></script>

<!-- automatically loads the Foundation Core and all JavaScript plugins. -->
<script src="/js/foundation.min.js"></script>

<!-- Initialize Foundation -->
<script>
  $(document).foundation();
</script>

我使用此代码获得的唯一灵巧是基础样式按钮，但是当您单击它时，没有下拉选项。请让我知道我做错了什么，以及如何通过一个简单的下拉按钮解决这个问题。

提前致谢。

Answer 1

您需要包含所有必需的js文件。来自Foundation Docs：

在继续之前，请确保您的网页上已包含jquery.js foundation.js和foundation.dropdown.js。例如，在结束<body>标记之前添加以下内容：

 <!-- ... -->

<!-- your button... -->
<a href="#" data-dropdown="drop1" class="button">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>

<!-- ... -->

<!--
Here you should include the paths of your javascript files and initialize foundation
Add all these scripts before the closing <body> tag
-->

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Foundation -->
<script src="js/foundation.min.js"></script>

<!-- Foundation dropdown -->
<script src="js/foundation.dropdown.min.js"></script>

<!-- Initialize Foundation -->
<script>
$(document).foundation();
</script>

</body>

使用Zurb Foundation 5启用下拉按钮 - 使用sass mixins

1 个答案: