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

Question

我创建了一个点击事件，它打开之前 'hidden' 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 仍然是“打开的”。

为了轻松修复，只需更改 else 块中的 className

else {
  moreInfo.className = "";  
  moreInfo.style.display = 'none';
}

此外，我建议您在元素上使用 classList 属性 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

使用 class 列表可能如下所示：

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";
  }
});

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

Why does my JS 'click event' only run once?

html

javascript

event-handling

mouseclick-event

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

Why does my JS 'click event' only run once?

html

javascript

event-handling

mouseclick-event

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