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

【问题标题】：Must click twice to active onclick event JavaScript必须单击两次才能激活 onclick 事件 JavaScript
【发布时间】：2020-06-23 08:01:50
【问题描述】：

我需要在 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>

【问题讨论】：

你的 JS 不完整。请更新我给你的 sn-p
另外，请做一个document.querySelector(".funfactans").classList.add("otherclass") 并将所有样式放入您的样式表中
最后是 height="0px" 与可见性，另一个高度是 display:none 和 display:block 之间的区别
document.querySelector(".funfactans")还不够吗？
您能否给我写一个答案作为答案而不是评论？我很难理解...

标签： javascript onclick dom-events

【解决方案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>

【讨论】：