为什么我必须单击两次此 JavaScript 函数才能工作？

Question

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

function showOfferMessage() {                                        

  var coll = document.getElementsByClassName("collapsible");

  var i;

  for (i = 0; i < coll.length; i++) {

    coll[i].addEventListener("click", function() {

      this.classList.toggle("active");

      var content = this.nextElementSibling;

      if (content.style.display === "block") {

        content.style.display = "none";

      } else {

        content.style.display = "block";

      }

    });

  }

}

<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage()">

    <div class="offer-info-item">

        <div class="offcatreview-title">

            <h3>Cat. Rating</h3>

        </div>

        <div class="offer-cat-rating">

        </div>

    </div>

</div>

<div class="content">

    <p>'.$message.'</p>

</div>

Answer 1

那是因为您在每次点击时都注册了一个事件侦听器！因此，每次单击时，侦听器都会再次执行。您的代码已修复：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;function showOfferMessage(element) {&nbsp; &nbsp; element.classList.toggle("active");&nbsp; &nbsp; var content = element.nextElementSibling;&nbsp; &nbsp; if (content.style.display === "block") {&nbsp; &nbsp; &nbsp; content.style.display = "none";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; content.style.display = "block";&nbsp; &nbsp; }}<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage(this)">&nbsp; &nbsp; <div class="offer-info-item">&nbsp; &nbsp; &nbsp; &nbsp; <div class="offcatreview-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Cat. Rating</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="offer-cat-rating">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><div class="content" style="display: block">&nbsp; &nbsp; <p>'.$message.'</p></div>

Answer 2

该onclick事件执行在元素showOfferMessage() {}上放置事件侦听器的函数"collapsible"。然后第二次单击执行事件监听器的内容。但首先，只要你只有一个名为"collapsible"“为什么”的元素，就尝试获取多个元素。使用 css 样式选择器执行document.querySelector并定位元素，然后addEventListener直接链接到该选择器上。当您像这样查询样式时，您会得到显式设置的样式。在您的情况下，如果没有单击该"collapsible"元素，则不会设置显示样式。即使 div 具有块的默认显示样式，但它尚未显式设置，因此...style.display将返回空字符串 -> falsy。您必须使用该getComputedStyle方法获得隐式样式，像这样（codepen）：document.querySelector(".collapsible").addEventListener("click", function() {  this.classList.toggle("active");  var content = document.querySelector(".content");  if (window.getComputedStyle(content).display === "block") {    content.style.display = "none";  } else {    content.style.display = "block";  }});我可能会在事件监听器中使用箭头函数：document.querySelector(".collapsible").addEventListener("click", event => {  event.target.classList.toggle("active");  var content = document.querySelector(".content");  if (window.getComputedStyle(content).display === "block") {    content.style.display = "none";  } else {    content.style.display = "block";  }});

Answer 3

我遇到了类似的问题，最终使用!==而不是===：if (content.style.display !== "none") {&nbsp; &nbsp; content.style.display = "none";} else {&nbsp; &nbsp; content.style.display = "block";};