将 SCSS 和 JS 文件添加到 html，无法正常工作
[英]Adding SCSS and JS file to html, not working correctly
问题描述
我一直在尝试将这个“汉堡”风格的菜单添加到网站上，但因为汉堡 animation 没有在点击时播放而被卡住了。
菜单在这里： https://codepen.io/designcouch/pen/hyFAD
我将“已编译”的 SCSS 代码放入 css 文件中，并像我想要的任何其他 css 文件一样链接它。
有人可以解释我做错了什么吗？ 先感谢您。
$('#menu-toggle').click(function(){ $(this).toggleClass('open'); })
* { transition: 0.25s ease-in-out; box-sizing: border-box; } body { background: #d9e4ea; } span { display: block; background: #566973; border-radius: 2px; } #menu-toggle { width: 100px; height: 100px; margin: 50px auto; position: relative; position: relative; cursor: pointer; background: rgba(255, 255, 255, 0.4); border-radius: 5px; } #menu-toggle:hover { background: rgba(255, 255, 255, 0.8); } #menu-toggle #hamburger { position: absolute; height: 100%; width: 100%; } #menu-toggle #hamburger span { width: 60px; height: 4px; position: relative; top: 24px; left: 20px; margin: 10px 0; } #menu-toggle #hamburger span:nth-child(1) { transition-delay: 0.5s; } #menu-toggle #hamburger span:nth-child(2) { transition-delay: 0.625s; } #menu-toggle #hamburger span:nth-child(3) { transition-delay: 0.75s; } #menu-toggle #cross { position: absolute; height: 100%; width: 100%; transform: rotate(45deg); } #menu-toggle #cross span:nth-child(1) { height: 0%; width: 4px; position: absolute; top: 10%; left: 48px; transition-delay: 0s; } #menu-toggle #cross span:nth-child(2) { width: 0%; height: 4px; position: absolute; left: 10%; top: 48px; transition-delay: 0.25s; } #menu-toggle.open #hamburger span { width: 0%; } #menu-toggle.open #hamburger span:nth-child(1) { transition-delay: 0s; } #menu-toggle.open #hamburger span:nth-child(2) { transition-delay: 0.125s; } #menu-toggle.open #hamburger span:nth-child(3) { transition-delay: 0.25s; } #menu-toggle.open #cross span:nth-child(1) { height: 80%; transition-delay: 0.625s; } #menu-toggle.open #cross span:nth-child(2) { width: 80%; transition-delay: 0.375s; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="menu-toggle"> <div id="hamburger"> <span></span> <span></span> <span></span> </div> <div id="cross"> <span></span> <span></span> </div> </div> <script src="button.js"></script> </body> </html>
1 个解决方案
解决方案1
-1 已采纳 2020-04-24 00:48:26
你在这里做的一切都是正确的。 您使用的 $ object 可能需要调用一个库。
$('#menu-toggle').click(function(){
$(this).toggleClass('open');
})
您使用的语法实际上来自名为 jQuery 的库，该库基于 JavaScript 构建，并提供此类实用程序来帮助我们编写更少更好的代码。
为此，只需在 Internet 上搜索 jQuery CDN。 打开第一个链接和 go 到 jQuery 3.x 缩小，将出现一个弹出窗口并复制脚本并将其放置在关闭你的身体标签之前。
<html>
<head></head>
<body>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" />
</body>
</html>
此外，如果您不愿意使用 jQuery。 这就是您在本机 JavaScript 中编写的方式。
document.getElementById("menu-toggle").addEventListener("click", function(){
if(this.classList[0] === 'open'){
this.classList.remove('open');
}
else {
this.classList.add('open');
}
});
JS 文件未正确链接到 HTML 文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.