菜单关闭按钮只能工作一次，你能帮我吗?

我使用javascript创建了一个导航栏，关闭按钮只使用一次，如果我反复打开和关闭菜单，关闭按钮不起作用，也许有一个错误，但我无法访问它，有人能帮助我吗?谢谢你 ..................................................................................................................................................................................

function myFunction() {
const e = document.createElement('div');
e.className = 'hello';
e.innerHTML = `

<span id="hi" class="material-icons">
close
</span>
<a class="na" href="#">Home
<span class="material-icons">home</span>
</a>
<a class="na" href="#">About us
<span class="material-icons"> business</span>
</a>
<a class="na" href="#">Products
<span class="material-icons"> local_mall </span>
</a>
<a class="na" href="#">Contact
<span class="material-icons"> call</span>
</a> 
`
e.style.backgroundColor = '#a90707'
e.style.display = 'flex'
e.style.flexDirection = 'column'
e.style.width = '50%'
e.style.height = '100vh'
e.style.position = 'absolute'
e.style.right = '0'
e.style.top = '0'
e.style.color = 'white'
e.style.fontSize = '25px'
document.body.appendChild(e);
let ibt = document.querySelector('#hi')
ibt.addEventListener('click', function()
{
if (e.style.display = 'block') {
e.style.display = 'none'
}
})
}

@media screen and (max-width: 892px)
{
nav ul{
width: 60%;
}

.topnav a.icon {
float: right;
display: block;
}

.topnav a {
display: none;
}
/*  */
.na{
color: white;
list-style: none;
padding: 20px 10px;
text-decoration: none;
font-size: 1.2rem;
display: inline-block;
position: relative;
}
/*  */
.na::before{
content: '';
height: 2px;
width:0;
background-color: white;
position: absolute;
bottom:10px;
left: 20px;
transition: width 0.25s ease-out;
}
.na:hover::before{
width: 15%;
}
/*  */
#hi{
padding-top: 15px;
padding-left: 10px;
cursor: pointer;
display: inline-block;
position: relative;
}
/*  */
#hi::before{
content: '';
height: 2px;
width:0;
background-color: white;
position: absolute;
bottom:-2px;
left: 12px;
transition: width 0.25s ease-out;
}
#hi:hover::before{
width: 6%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="this is the big store to sell food products">
<title>Hasaballa Market</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet">
</head>
<body>
<header>
<nav class="topnav" id="myTopnav">
<img src="images/logo.png" alt="no pic" width="80px">
<ul>
<li><a href="#">Contact
<span class="material-icons"> call</span>
</a></li>
<li><a href="#">Products
<span class="material-icons"> local_mall </span>
</a></li>
<li><a href="#">About us
<span class="material-icons"> business</span>
</a></li>
<li><a  href="#">Home
<span class="material-icons">home</span>
</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> </li>
</ul>
</nav>
</header>

当比较值时(在if语句中)使用===，而不是=(赋值操作符)
开始你的菜单(导航栏)作为display: none;，你可以切换display = "flex" / "none"在一个三元操作符?:
不要使用内联的JSon*处理器。JS应该只在一个地方，那是各自的标签或文件。使用eventtarget . addeventlistener()代替。

// DOM utility functions:
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const css = (el, styles) => typeof styles === "object" ? Object.assign(el.style, styles) : el.style.cssText = styles;

// Task: create navbar:
const createNavbar = () => {
const elNavbar = elNew('div', {
className: "navbar",
innerHTML: `
<span class="toggleNavbar material-icons">close</span>
<a class="na" href="#"><span class="material-icons">home</span> Home</a>
<a class="na" href="#"><span class="material-icons">business</span> About us</a>
<a class="na" href="#"><span class="material-icons">local_mall</span> Products</a>
<a class="na" href="#"><span class="material-icons">call</span> Contact</a> 
`
});
css(elNavbar, `
display: none;
background-color: #a90707;
flex-direction: column;
width: 50%;
height: 100vh;
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 25px;
`);
el("body").append(elNavbar);

const toggleNavbar = () => {
const isHidden = elNavbar.style.display === "none"
elNavbar.style.display = isHidden ? "flex" : "none";
};

// Toggle navbar:
els(".toggleNavbar").forEach((elBtn) => {
elBtn.addEventListener("pointerdown", toggleNavbar);
});
};
// Init:
createNavbar();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="toggleNavbar" type="button">Menu</button>

在比较值时，需要使用" equal ";比较操作符(==)，而不是赋值操作符(=)。

if (e.style.display == 'block') {

但也要注意，一旦元素被隐藏，您就没有任何逻辑来取消对它的隐藏。我会使用:

if (e.style.display != 'block') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}

相关内容

最新更新

热门标签：