Javascript 正在将SCSS和JS文件添加到html，无法正常工作
我一直在尝试将这个“汉堡”风格的菜单添加到一个网站上，但由于点击没有播放汉堡动画，我被卡住了 菜单如下： 我将“编译的”SCSS代码放入css文件，并将其链接起来，就像我喜欢任何其他css文件一样 有人能解释一下我做错了什么吗？先谢谢你Javascript 正在将SCSS和JS文件添加到html，无法正常工作,javascript,html,css,sass,web-deployment,Javascript,Html,Css,Sass,Web Deployment,我一直在尝试将这个“汉堡”风格的菜单添加到一个网站上，但由于点击没有播放汉堡动画，我被卡住了 菜单如下： 我将“编译的”SCSS代码放入css文件，并将其链接起来，就像我喜欢任何其他css文件一样 有人能解释一下我做错了什么吗？先谢谢你 $（“#菜单切换”）。单击（函数（）{ $（this.toggleClass（'open'）； }) *{ 过渡：0.25秒缓进缓出； 框大小：边框框； } 身体{ 背景：#d9e4ea； } 跨度{ 显示：块； 背景#566973； 边界半径：2px； }
$（“#菜单切换”）。单击（函数（）{
$（this.toggleClass（'open'）；
})*{
过渡：0.25秒缓进缓出；
框大小：边框框；
}
身体{
背景：#d9e4ea；
}
跨度{
显示：块；
背景#566973；
边界半径：2px；
}
#菜单切换{
宽度：100px；
高度：100px；
保证金：50px自动；
位置：相对位置；
位置：相对位置；
光标：指针；
背景：rgba（255，255，255，0.4）；
边界半径：5px；
}
#菜单切换：悬停{
背景：rgba（255，255，255，0.8）；
}
#菜单切换#汉堡{
位置：绝对位置；
身高：100%；
宽度：100%；
}
#菜单切换#汉堡包跨度{
宽度：60px；
高度：4px；
位置：相对位置；
顶部：24px；
左：20px；
利润率：10px0；
}
#菜单切换#汉堡包跨度：第n个孩子（1）{
过渡延迟：0.5s；
}
#菜单切换#汉堡包跨度：第n个孩子（2）{
过渡延迟：0.625s；
}
#菜单切换#汉堡包跨度：第n个孩子（3）{
过渡延迟：0.75s；
}
#菜单切换#交叉{
位置：绝对位置；
身高：100%；
宽度：100%；
变换：旋转（45度）；
}
#菜单切换#交叉跨度：第n个子项（1）{
身高：0%；
宽度：4px；
位置：绝对位置；
排名前10%；
左：48px；
转换延迟：0s；
}
#菜单切换#交叉跨度：第n个子项（2）{
宽度：0%；
高度：4px；
位置：绝对位置；
左：10%；
顶部：48px；
过渡延迟：0.25s；
}
#菜单切换。打开#汉堡包跨度{
宽度：0%；
}
#menu-toggle.open#汉堡包跨度：第n个孩子（1）{
转换延迟：0s；
}
#menu-toggle.open#汉堡包跨度：第n个孩子（2）{
过渡延迟：0.125s；
}
#menu-toggle.open#汉堡包跨度：第n个孩子（3）{
过渡延迟：0.25s；
}
#menu-toggle.open#交叉跨度：第n个子项（1）{
身高：80%；
过渡延迟：0.625s；
}
#menu-toggle.open#交叉跨度：第n个子项（2）{
宽度：80%；
过渡延迟：0.375s；
}您在这里做的一切都是正确的。您正在使用的$object可能需要调用一个库
$('#menu-toggle').click(function(){
$(this).toggleClass('open');
})
<html>
<head></head>
<body>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" />
</body>
</html>
文件结构中的关系是什么？它们都在同一个文件夹中。这段代码在Codepen.io上运行得非常好，但当我尝试在自己的项目中使用它时，该按钮不起作用。如果它位于同一文件夹（同级文件夹）中，则您列出的内容将起作用。可以尝试使用
。/style.cssdocument.getElementById("menu-toggle").addEventListener("click", function(){
if(this.classList[0] === 'open'){
this.classList.remove('open');
}
else {
this.classList.add('open');
}
});