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

Question

我需要点击两次 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>

Answer 1

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>

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

Must click twice to active onclick event JavaScript

javascript

onclick

dom-events