使用 Zurb Foundation 5 启用下拉按钮 - 使用 sass mixins
-
20-12-2019 - |
题
我想使用 Sass mixins 在我的网站上添加一个下拉按钮。我已经阅读了有关 Javascript 的文档,并尽我所知进行了安装,并且我已经浏览了有关下拉按钮的文档。这是我的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 安装:(在我的 html 文件末尾的结束 body 标记之前,除了位于我的 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>
我用这段代码获得的唯一结果是一个基础样式的按钮,但是当您单击它时,没有下拉选项。请让我知道我做错了什么以及如何通过简单的下拉按钮解决此问题。
提前致谢。
解决方案
您需要包含所有必需的 js 文件。从 基础文档:
确保
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>
不隶属于 StackOverflow