时间戳

首页 > 解决方案 > 为什么我必须单击两次才能使此 JavaScript 函数起作用？

javascript - 为什么我必须单击两次才能使此 JavaScript 函数起作用？

问题描述

为了使功能将显示更改为“隐藏”然后返回“阻止”，每次需要单击 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>

标签： javascripthtml

解决方案

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

您的代码已修复：

                    
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>

推荐阅读