这是因为你在每次点击时都注册了一个事件监听器!所以你的监听器在你每次点击时都会再执行一次。
您的代码已修复：

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>

onclick事件执行showOfferMessage() {}函数，该函数在"collapsible"元素上放置一个事件侦听器，然后第二次单击执行eventlistener的内容。
但首先，只要你只有一个名为"collapsible"的元素，为什么要尝试获取多个元素呢？做一个document.querySelector，用css样式选择器指向元素，然后直接在那个选择器上链接addEventListener。
当你像这样查询样式时，你会得到显式设置的样式，在你的例子中，如果没有点击"collapsible"元素，就没有设置显示样式，即使div有一个默认的block显示样式，它也没有显式设置，所以...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";
  }
});

我可能会在事件侦听器中使用arrow function：

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";
  }
});

我遇到了类似的问题，最终使用!==而不是===：

if (content.style.display !== "none") {
    content.style.display = "none";
} else {
    content.style.display = "block";
};