我正在尝试重新创建苹果网站。
HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/menu.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/page.css">
<title>Apple</title>
</head>
<body>
<header id="header">
<div class="headerContent">
<a class= "menuBtn">
<ion-icon name="menu-outline" class="logoImg"> </ion-icon>
</a>
<a href="">
<ion-icon name="logo-apple" class="logoImg"> </ion-icon>
</a>
<a href="">
<ion-icon name="bag-outline" class="logoImg"> </ion-icon>
</a>
</div>
</header>
<div class="menu">
<div class="menuContent">
<div class="menuInput">
<input type="text" placeholder="Search apple.com">
</div>
<div class="menuItem">
<a href="">Store</a>
</div>
<div class="menuItem">
<a href="">Mac</a>
</div>
<div class="menuItem">
<a href="">iPad</a>
</div>
<div class="menuItem">
<a href="">iPhone</a>
</div>
<div class="menuItem">
<a href="">Watch</a>
</div>
<div class="menuItem">
<a href="">Airpods</a>
</div>
<div class="menuItem">
<a href="">Tv & Home</a>
</div>
<div class="menuItem">
<a href="">Entertainment</a>
</div>
<div class="menuItem">
<a href="">Accessories</a>
</div>
<div class="menuItem">
<a href="">Support</a>
</div>
</div>
</div>
<div class="list">
<div class="listItem">
<img src="image/list/macBookAir.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/macBookPro.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/iMac.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/macMini.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/macStudio.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/macPro.PNG" alt="">
</div>
<div class="listItem">
<img src="image/list/compare.PNG" alt="">
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>JavaScript代码：
const menuBtn = document.querySelector('.menuBtn');
const menu = document.querySelector('.menu');
const header = document.querySelector('#header');
let IsMenuOpen = false;
menuBtn.addEventListener('click', () => {
if(IsMenuOpen === false) {
slideDown();
header.backgroundColor = "black";
IsMenuOpen = true;
}else {
slideUp();
header.backgroundColor = "#333333";
IsMenuOpen = false;
}
})
function slideUp() {
menu.style.transition = "all 0.5s ease-in-out";
menu.style.height = "0px";
}
slideUp();
function slideDown() {
menu.style.transition = "all 0.5s ease-in-out";
menu.style.height = "100%";
}然后有4个不同的css代码。
这是菜单的css代码
.menu {
position: absolute;
display: flex; /* disponde gli elementi sull asse principale x */
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
margin-top: -5px;}
.menuContent {
margin-top: 55px;
width: 80%}
.menuInput {
width: 100%;
display: flex;
justify-content: center;
border-bottom: 1px solid #424245;
padding-top: 7px;
padding-bottom: 10px;}
.menuInput input{
width: 95%;
height: 30px;
font-size: 18px;
padding: 5px;
background-color: #1d1d1f;
outline: none;
border: none;
border-radius: 10px;
color: white;}
.menuItem {
display:flex ;
align-items: center;
height: 7%;
font-size: 18px;
border-bottom: 1px solid #424245;}
.menuItem a {
text-decoration: none;
color: #9f9f9f;
transition: all ease 0.3s;}
.menuItem a:hover {
color: white;}通过点击左边的一个按钮，它应该打开一个菜单，但它没有。即使我不单击，菜单也总是打开的。如果我点击它保持不变，我认为JS代码是正确的，因为我没有得到任何错误。
2条答案
按热度按时间ltqd579y1#
我认为你需要把相关的代码放在
DOMContentLoaded（DOMContentLoaded）中。menuBtn在加载时最初未知。试试这个：
iyr7buue2#
你的代码工作，我认为js文件没有加载到你的html中，确保你在html文件中有
<script src="index.js"/>（指向js或在html中使用内联js，如下所示：