将 SCSS 和 JS 文件添加到 html,无法正常工作

Posted

技术标签:

【中文标题】将 SCSS 和 JS 文件添加到 html,无法正常工作【英文标题】:Adding SCSS and JS file to html, not working correctly 【发布时间】:2020-08-07 10:50:36 【问题描述】:

我一直在尝试将这种“汉堡”风格的菜单添加到网站,但由于点击时没有播放汉堡动画而被卡住了。

菜单在这里: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>

【问题讨论】:

文件结构有什么关系? 它们都在同一个文件夹中。此代码在 Codepen.io 上完美运行,但当我尝试在自己的项目中使用它时,按钮不起作用。 如果它在同一个文件夹中(兄弟),那么您列出的内容将起作用。可以尝试使用../style.css 来查看它是否真的上升了一个级别。有时相对来源可能会很痛苦。没有真正看到结构,很难说。只是在此期间尝试一下。 :) 你必须添加 jquery 库作为参考 这能回答你的问题吗? javascript runtime error: '$' is undefined 【参考方案1】:

你在这里做的一切都是正确的。您使用的 $ 对象可能需要调用一个库。

$('#menu-toggle').click(function()
   $(this).toggleClass('open');
)

您使用的语法实际上来自一个名为 jQuery 的库,该库基于 JavaScript 构建并提供此类实用程序来帮助我们编写更少更好的代码。

为此,只需在 Internet 上搜索 jQuery CDN。打开第一个链接并转到 jQuery 3.x minified,将出现一个弹出窗口并复制脚本并将其放置在关闭您的 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');
  
);

【讨论】:

非常感谢您的详细解释。

以上是关于将 SCSS 和 JS 文件添加到 html,无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

将 scss 文件添加到 Stackblitz

如何将 scss 导入到我的 Vue 组件中?

ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法(vue-cli-plugin-nativescript-vue)

无法将 scss 文件导入到反应组件中

如何在 Ionic 3 中导入外部 JS 文件

如何将 SCSS 样式添加到 React 项目?