为什么我必须单击两次此 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

那是因为您在每次点击时都注册了一个事件侦听器！因此，每次单击时，侦听器都会再次执行。

您的代码已修复：

                    

function showOfferMessage(element) {

    element.classList.toggle("active");

    var content = element.nextElementSibling;

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

      content.style.display = "none";

    } else {

      content.style.display = "block";

    }

}

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

    <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" style="display: block">

    <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") {

    content.style.display = "none";

} else {

    content.style.display = "block";

};