我使用javascript創建了一個導航欄，關閉按鈕只使用一次，如果我反復打開和關閉選單，關閉按鈕不起作用，可能有錯誤但我無法訪問它，有人可以幫助我嗎？謝謝你 ................................................ ..................................................... ..................................................... .........................................
function myFunction() {
const e = document.createElement('div');
e.className = 'hello';
e.innerHTML = `
<span id="hi" >
close
</span>
<a href="#">Home
<span >home</span>
</a>
<a href="#">About us
<span > business</span>
</a>
<a href="#">Products
<span > local_mall </span>
</a>
<a href="#">Contact
<span > 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,[email protected],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()">☰</a> </li>
</ul>
</nav>
</header>uj5u.com熱心網友回復：
- 比較值時（在
if陳述句內）使用===，而不是=（賦值運算子） - 啟動您的選單（導航欄），因為您可以在三元運算子
display: none;中切換display = "flex" / "none"?: - 不要使用行內 JS
on*處理程式。JS 應該只在一個地方，那就是各自的標簽或檔案。請改用EventTarget.addEventListner()。
// 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 >close</span>
<a href="#"><span >home</span> Home</a>
<a href="#"><span >business</span> About us</a>
<a href="#"><span >local_mall</span> Products</a>
<a href="#"><span >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>uj5u.com熱心網友回復：
比較值時，您需要“相等”比較運算子 (==)，而不是賦值 (=)。
if (e.style.display == 'block') {
但還要注意，一旦元素被隱藏，您就沒有任何邏輯可以取消隱藏元素。我會使用：
if (e.style.display != 'block') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/496996.html
標籤：javascript html css
上一篇：另一個彈性盒中的彈性盒
下一篇：提交后禁用按鈕后表單未提交