显示/隐藏需要双击

Question

我正在编写一个基本的显示/隐藏功能，该功能显示一块内容并将某些文本从“显示更多好处”更改为“显示更少好处”（反之亦然。）>

但是由于某些原因，当我第一次单击“显示更多好处”时，需要两次单击才能运行。然后，只需单击一下，即可来回交替切换。

这是我的代码：

<div class="content" id="content"><br>
<p><span class="benefit-stat">$2B</span> lorem</p>
<p><span class="benefit-stat">$2B</span> ipsum</p>
<p><span class="benefit-stat">$100</span> ipsum</p>
<p><span class="benefit-stat">32%</span> ipsum</p>
</div>
<p class="benefits-drop" id="text" onclick="showHide()">See More Benefits</p>
<script>
function showHide(c,t) {
  var c = document.getElementById("content");
  var t = document.getElementById("text");
  if (c.style.display === "none") {
    c.style.display = "block";
    t.innerHTML = 'See Less Benefits';
  } else {
    t.innerHTML = 'See More Benefits';
    c.style.display = "none";
  }
}
</script>
为什么会这样？我将如何解决它？

我正在编写一个基本的显示/隐藏功能，该功能显示一块内容并将某些文本从“显示更多好处”更改为“显示更少好处”（反之亦然）。但是由于某些原因，当我单击“ ...

Answer 1

您需要单击两次的原因：