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

问题描述 投票：0回答：2

[我一直试图将这个“汉堡”样式菜单添加到网站上，并且由于单击时没有播放汉堡动画而陷入困境。

菜单在这里：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>
javascript html css sass web-deployment
2个回答
0
投票

您应该导入jquery库

$('#menu-toggle').click(function(){
  $(this).toggleClass('open');
})
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
0
投票

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

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

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

为此，只需在互联网上搜索jQuery CDN。打开第一个链接，然后缩小到jQuery 3.x，将出现一个弹出窗口，然后复制脚本并将其放置在关闭body标签之前。

此外，如果您不愿意使用jQuery。这就是用本机JavaScript编写的方式。

document.getElementById("menu-toggle").addEventListener("click", function(){
  if(this.classList[0] === 'open'){
     this.classList.remove('open');
  }
  else {
     this.classList.add('open');
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.