显示/隐藏需要双击 [英] Show/Hide Requires a Double-click

问题描述

我正在编写一个基本的显示/隐藏功能，该功能显示一块内容并将某些文本从显示更多好处"更改为显示更少好处"(反之亦然).

I'm writing a basic show/hide function that displays a block of content and changes some text from "Show More Benefits" to "Show Less Benefits" (and vice versa).

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

For some reason though, when I click "Show More Benefits" for the first time, it requires two clicks to run. Afterwards, it alternates back and forth just fine with one click.

这是我的代码:

<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>

为什么会这样?我该如何解决?

Any reason as to why this is happening? How would I go about fixing it?

推荐答案

您需要单击两次的原因:

The reason you need to click twice:

element.style.display 仅引用内嵌样式.

最初，您的元素没有 style 属性.结果， element.style.display 返回空的String:

Initially, your elements do not have a style-attribute. As a result, element.style.display returns the empty String:

function showHide(c,t) {
  var c = document.getElementById("content");
  var t = document.getElementById("text");
  console.log("c.style.display is:" + c.style.display);
  if (c.style.display === "none") {
    c.style.display = "block";
    t.innerHTML = 'See Less Benefits';
  } else {
    t.innerHTML = 'See More Benefits';
    c.style.display = "none";
  }
}

<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>

错误但简单的解决方案:

Bad but simple solution:

将 style ="display:block" 添加到您的初始HTML:

Add the style="display: block" to your initial HTML:

function showHide(c,t) {
  var c = document.getElementById("content");
  var t = document.getElementById("text");
  console.log("c.style.display is:" + c.style.display);
  if (c.style.display === "none") {
    c.style.display = "block";
    t.innerHTML = 'See Less Benefits';
  } else {
    t.innerHTML = 'See More Benefits';
    c.style.display = "none";
  }
}

<div class="content" id="content" style="display: none"><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>

更好的解决方案:

与其在 none 和 block 之间切换 style.display ，而是切换通用属性 hidden :

Instead of toggling style.display between none and block, instead toggle the universal attribute hidden:

function showHide() {
  const c = document.getElementById("content");
  const t = document.getElementById("text");
  
  t.textContent = c.hidden ? 'See Less Benefits' : 'See More Benefits';
  c.hidden = !c.hidden;
}

<div class="content" id="content" hidden><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>

这篇关于显示/隐藏需要双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！