我的 JavaScript 代码有问题吗
[英]is something wrong with my JavaScript code
问题描述
我正在尝试创建一个折叠导航栏。 我想知道你们是否可以检查代码，因为每当我刷新网站时，什么都没有发生，控制台也没有说代码中有任何错误。 HTML、CSS 和 JavaScript 代码如下。 如果您能查看并给我反馈，我将不胜感激，以便我纠正我的错误。 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body>
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav">
<ul class="ul-index">
<li class="li-index"><a href="" class="a-index">Home</a></li>
<li class="li-index"><a href="" class="a-index">About</a></li>
<li class="li-index"><a href="" class="a-index">Contact</a></li>
<li class="li-index"><a href="" class="a-index">Portfolio</a></li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
</html>
@media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector("index-nav").style.opacity = "1";
showNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
hideNav();
});
}
1 个解决方案
解决方案1
-1 2020-11-28 22:50:03
这里有几件事需要注意。 如果要将样式和 javascript 代码包含在<style>和<script>标记中，则应将它们全部保存在一个文件中。
此外，请参阅对 showNav 和 hideNav 函数的修改。
- document.querySelector("index-nav") -> document.querySelector(".index-nav") class 应该以
. -
showNav应该在执行后调用hideNav来实现切换事件
function showNav() { let openBtn = document.querySelector(".container"); openBtn.addEventListener("click", () => { document.querySelector(".index-nav").style.width = "40vw"; document.querySelector(".index-nav").style.height = "40vh"; document.querySelector(".index-nav").style.opacity = "1"; hideNav(); }); } function hideNav() { let closeBtn = document.querySelector(".container"); closeBtn.addEventListener("click", () => { document.querySelector(".index-nav").style.width = "0"; document.querySelector(".index-nav").style.height = "0"; document.querySelector(".index-nav").style.opacity = "0"; showNav(); }); }
@media screen and (min-width: 360px) { * { box-sizing: border-box; }.index-header { width: 100%; height: 100px; background-color: #569188; }.index-header.pic-ink { display: block; }.index-header.pic { width: 100px; height: 100px; }.index-header.container { display: inline-block; float: right; }.container.line-1, .line-2, .line-3 { width: 35px; height: 5px; background-color: #fff; margin: 6px 0; transition: 0.4s; }.index-header.index-nav { position: absolute; top: 100px; right: 0; background-color: #569188; width: 40vw; height: 40vh; z-index: 3; opacity: 0; }.index-nav.ul-index { display: flex; flex-direction: column; }.ul-index.li-index { display: flex; justify-content: center; padding: 15px; font-size: 18px; }.ul-index.li-index.a-index { text-decoration: none; color: #111; font-weight: 900; }.index-main { }.index-main.main-img { width: 100vw; height: 200px; margin-bottom: 20px; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Welcome to my Portfolio</title> </head> <body onload="showNav()"> <header class="index-header"> <a href="index.html" class="pic-link" ><img src="logo/logo.png" alt="" class="pic" /></a> <section class="container"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-3"></div> </section> <nav class="index-nav" > <ul class="ul-index"> <li class="li-index"><a href="" class="a-index">Home</a></li> <li class="li-index"><a href="" class="a-index">About</a></li> <li class="li-index"><a href="" class="a-index">Contact</a></li> <li class="li-index"><a href="" class="a-index">Portfolio</a></li> </ul> </nav> <main class="index-main"> <img src="img/banner.png" alt="" class="main-img" /> </main> </header> <section id="home"></section> <section id="about"></section> <section id="contact"></section> <section id="portfolio"></section> <section id="case"></section> </body> </html>
我的异步 JavaScript 代码有问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.