所以我認為實作一個 if 陳述句來讓一個元素在單擊按鈕時出現或消失是非常簡單的。幾個小時后，我沒有比讓元素消失更進一步。它注冊了第二次點擊（使用 console.log 測驗），但顯示屬性不會變回“flex”。
在我的句子中，我也已經嘗試過 'getElementById' 和 'querySelector' 的不同變體。
const edit = document.getElementById('edit-btn');
const fill = document.querySelector('#filler');
edit.addEventListener('click', popInOut(fill))
function popInOut(e){
if(e.style.display=='flex'){
e.style.display='none'
}else if(e.style.display=='none'){
e.style.display='flex'
}
}
'filler' 元素是具有這種樣式的引導列。
#filler{
display:flex;
flex-direction: column;
background-color: #1c1f22;
position:absolute;
top:40%;
height:50%;
}
uj5u.com熱心網友回復：
嘿，是您的查詢選擇器導致了問題，您也可以直接在函式中使用填充器，因為它是在全域范圍內宣告的
const edit = document.getElementById("edit-btn");
const filler = document.getElementById("filler");
edit.addEventListener("click", fix);
function fix() {
if (filler.style.display === "none") {
filler.style.display = "flex";
} else {
filler.style.display = "none";
}
}body {
font-family: sans-serif;
}
#filler {
display: flex;
/* flex-direction: column; */
background-color: whitesmoke;
position: absolute;
top: 30%;
left: 20%;
height: 50%;
gap: 1rem;
}
#filler div:nth-child(even) {
background: turquoise;
}
#filler div:nth-child(odd) {
background: yellowgreen;
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="style.css"/>
</head>
<body>
<div id="app">
<div id="filler">
<div>Hare krishna</div>
<div>Radhe Shyam</div>
<div>Sita Ram</div>
</div>
<button id="edit-btn">Edit</button>
</div>
<script src="index.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416333.html
標籤：