我創建了一個點擊事件，它可以打開一個先前 "隱藏 "的 div，并在您點擊同一按鈕后再次將其關閉。
然而，它只運行了一次（一次打開和一次關閉）--我不知道為什么如果我再次點擊它，它就不作業了。
let readMore = document. getElementById('clickAbout') 。
let moreInfo = document.getElementById('about') 。
let changeSepa = document.getElementById('sepChange');
readMore.addEventListener('click', function(>/span>) {
changeSepa.style.height = '2rem'/span>。
if (moreInfo.className == ""/span>) {
moreInfo.className = "open"。
moreInfo.style.display = 'block'。
} else {
moreInfo.style.display = 'none';
}
});
uj5u.com熱心網友回復：
你應該改變你的立場，它在第二次點擊時沒有進入if陳述句。
你可以通過添加console.log()來檢查。
readMore.addEventListener('click'/span>, function(){
changeSepa.style.height = '2rem'/span>。
if (moreInfo.className == ""/span>) {
moreInfo.className = "open"。
moreInfo.style.display = 'block'。
console.log("Button Click display block" )。
} else {
moreInfo.className = ""。
moreInfo.style.display = 'none'。
console.log("button click display none")。
}
});
另外我建議使用classList而不是className
在這里
readMore.addEventListener('click', function()>{
changeSepa.style.height = '2rem'/span>;
if (moreInfo.classList.contains("open") != true) {
moreInfo.classList.add("open")。
moreInfo.style.display = 'block'。
console.log("Button Click display block") 。
} else {
moreInfo.classList.remove("open") 。
moreInfo.style.display = 'none'。
console.log("Button click display none")。
}
});
uj5u.com熱心網友回復：
發生這種情況是因為你在檢查className == ""，但是你把className修改成了 "open"。在第二次點擊時，它檢查了現在是 "開放 "的className，并進入了else塊。在第三次點擊時，你希望它進入第一個塊，但className仍然是 "開放的"。
一個簡單的修復方法是改變else塊中的className
。else {
moreInfo.className = ""。
moreInfo.style.display = 'none';
}
另外我建議你利用元素上的classList屬性
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
使用類串列可以這樣：
readMore.addEventListener("click", function {
changeSepa.style.height = "2rem"/span>;
if (moreInfo.className == "") {
moreInfo.classList.add("open")。
moreInfo.style.display = "block"。
} else {
moreInfo.classList.remove("open") 。
moreInfo.style.display = "none"。
}
});
或者甚至
readMore.addEventListener("click", function () {
changeSepa.style.height = "2rem"/span>;
moreInfo.classList.toggle（"open"）。
if (moreInfo.className == "" ) {
moreInfo.style.display = "block"。
} else {
moreInfo.style.display = "none"。
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/321619.html
標籤：