javascript - 大家好,我正在尝试使用 js 创建一个侧滑菜单,但我遇到了这个 msg。意外的“常量”。const navSlide = () => {
问题描述
我正在尝试使用 Js 为侧面幻灯片菜单设置动画,但在验证 Js 文件时似乎存在错误。该错误表示 const 是意外错误。我在这里有点迷路了。验证 css 和 html 很好,但 js 代码不会发生任何事情。基本上我正在尝试将 .nav-active 类添加到 DOM 中,但无济于事。
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navlinks');
burger.addEventListener('click', () => {
nav.classList.toggle('.nav-active');
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
height: 8vh;
font-family: 'Lato', sans-serif;
background-color: black;
}
.logo {
height: 8vh;
}
.logoimg{
height: 8vh;
width: auto;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: 500;
font-size: 0.75em;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 24px;
height: 3px;
background-color: white;
margin: 5px 0;
}
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ryan Ragnini Design and Illustration">
<meta name="keywords" content="Ryan Ragnini, designer, graphic designer, design, graphic design, webpage, website, logo designer, logo, branding, illustrator, illustration">
<meta name="author" content="Ryan Ragnini">
<link type="text/css" href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Ryan</title>
</head>
<body>
<nav>
<div class="logo">
<img class="logoimg" src="logo.png" alt="Logo Ryan Ragnini">
</div>
<ul class="nav-links">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
解决方案
推荐阅读
- javascript - javascript中的未知返回类型
- python - 使用列表中的值查找字典键
- api - ECDSA secp256k1 签名交易比特币 API
- python - Python:如何将 2 列相乘?
- json - Groovy JSON 属性重命名
- google-drive-api - 在 JupyterLab 中从 Google Drive 读取文件
- excel - 根据 3x 单元格 EXCEL 的标准更改行颜色
- sql-server - 如果未在 SSIS 服务器内执行,SSIS 包将失败
- python - Raspberry Pi 4,Open CV 错误:V4L2:OpenCV 不支持传入图像的像素格式
- python - 如何确定图像是图像的图像还是真实 3d 对象的图像?