为什么我必须点击两次才能让这个JavaScript函数工作？

为了使功能将显示更改为“隐藏”，然后再返回到“阻止”，每次需要点击2次。为什么会这样？如何将其减少到只需单击一次

函数showOfferMessage（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

猫。评级
“.$message”

这是因为每次单击都会注册一个事件侦听器！因此，每次单击时，侦听器都会执行一次

您的代码已修复：

函数showOfferMessage（元素）{
元素.classList.toggle（“活动”）；
var content=element.nextElementSibling；
如果（content.style.display==“块”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
}

猫。评级
“.$message”

onclick事件执行

showOfferMessage（）{}

函数，该函数将事件侦听器置于

可折叠的
元素上。然后，第二次单击执行eventlistener的内容

但首先，只要您只有一个名为“可折叠”的元素，为什么要尝试获取多个元素呢。执行
document.querySelector
并使用css样式选择器以元素为目标，然后将
addEventListener直接链接到该选择器上

当您像查询样式一样查询样式时，会得到显式设置的样式。在您的情况下，如果没有单击“可折叠”元素，则不会设置任何显示样式。即使div的默认显示样式为block，它也没有被显式设置，因此
…style.display
将返回一个空字符串->falsy。
你必须用这个方法得到隐式风格

像这样（）：

document.querySelector（“.collapsable”）.addEventListener（“单击”，函数（）{
console.log（this）；
this.classList.toggle（“活动”）；
var content=document.querySelector（“.content”）；
console.log（window.getComputedStyle（content.display））；
if（window.getComputedStyle（content.display==“block”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
});

我可能会使用事件内侦听器：

document.querySelector（“可折叠”）.addEventListener（“单击”，事件=>{
console.log（event.target）；
event.target.classList.toggle（“活动”）；
var content=document.querySelector（“.content”）；
console.log（window.getComputedStyle（content.display））；
if（window.getComputedStyle（content.display==“block”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
});
由于元素的显示值最初是空字符串（正如@rayhatfield在其删除的答案中所建议的那样），因此第一次仍然必须单击两次。@El_Vanja fixedah是的，这确实有效，但我以前有过，我将该函数放在onclick函数中，以便在动态加载的内容上执行该函数。如果我在DOM存在之前将函数放入代码中，则不会发生任何事情。请所有查看此代码的人注意：最好创建一个CSS类来控制显示，而不是使用内联样式，然后切换该类（我理解您为什么在回答中跳过该选项）@dimitrobostrovich使用
onclick
解决方案更新