必须单击两次才能激活 onclick 事件 JavaScript

钆

我需要在 div( class="funfact")上单击两次才能激活onclick事件ff0()。是的，我在 HTML 文件中包含了 JS 脚本。

var ffans = document.querySelector(".funfactans");

//ffans = fun fact answer
function ff0() {
  if (ffans[0].style.height == '0px') {
    ffans[0].style.height = '45px'
    ffans[0].style.marginBottom = '10px'
    ffans[0].style.paddingRight = '10px'
    ffans[0].style.visibility = 'visible'
    ffans[0].style.opacity = '1'
    ffans[0].style.pointerEvents = 'auto'
  }

<div class="facts">
  <div class="funfact" onclick="ff0()">Fact1</div>
  <div class="funfactans">Fact1 answer</div>
</div>
<script src="mainNew.js"></script>

普隆詹

height="0px" vs 可见性和另一个高度是 display:none 和 display:block 之间的区别
.style.height == '0px' 不能这样测试

我相信你想要这个

window.addEventListener("load", function() {
  document.querySelector(".facts").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("funfact")) {
      tgt.nextElementSibling.classList.toggle("hide");
    }
  })
})

.funfactans {
  height: 45px;
  marginBottom: 10px;
  paddingRight: 10px;
  pointerEvents: auto;
}

.hide {
  display: none
}

<title>FunFacts</title>

<div class="facts">
  <div class="funfact">Fact1</div>
  <div class="funfactans hide">Fact1 answer</div>
  <div class="funfact">Fact2</div>
  <div class="funfactans hide">Fact2 answer</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。