为什么我的 JS 'click event'只运行一次？

Question

我创建了一个点击事件，它会打开先前"隐藏"的div，并在单击同一按钮时再次关闭它。

然而，它只运行一次(一次打开和一次关闭)-我不知道为什么它不工作，如果我再次点击它。

let readMore = document.getElementById('clickAbout');
let moreInfo = document.getElementById('about');
let changeSepa = document.getElementById('sepChange');

readMore.addEventListener('click', function(){
changeSepa.style.height = '2rem';
if (moreInfo.className == "") {
moreInfo.className = "open";
moreInfo.style.display = 'block';
} else {

moreInfo.style.display = 'none';
}
});

Answer 1

出现这种情况是因为您正在检查className == "，但您正在将className修改为"open"。在第二次点击时，它检查className现在是"然后到else区域。在第三次单击时，您希望它进入第一个块，但className仍然是"open"

对于一个简单的修复，只需更改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";
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";
moreInfo.classList.toggle("open");
if (moreInfo.className == "") {
moreInfo.style.display = "block";
} else {
moreInfo.style.display = "none";
}
});