我一直试图将这个"汉堡"风格的菜单添加到网站上，但由于点击时没有播放汉堡动画而陷入困境。
菜单在这里：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>您在这里做的一切都是正确的。您正在使用的$对象可能需要调用一个库。
$('#menu-toggle').click(function(){
$(this).toggleClass('open');
})
您使用的语法实际上来自一个名为jQuery的库，该库是在JavaScript上构建的，并提供了这样的实用程序来帮助我们编写越来越好的代码。
为此，只需在互联网上搜索jQuery CDN。打开第一个链接并转到jQuery3.x minimied，会出现一个弹出窗口，复制脚本并将其放置在关闭body标记之前。
<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');
}
});