Show/Hide 需要双击

Question

我正在编写一个基本的 show/hide 函数，它显示一个内容块并将一些文本从 "Show More Benefits" 更改为 "Show Less Benefits"（反之亦然）。

但由于某些原因，当我第一次点击 "Show More Benefits" 时，需要点击两次才能运行。然后一键切换就好了

这是我的代码：

<div class="content" id="content"><br>
<p><span class="benefit-stat">B</span> lorem</p>
<p><span class="benefit-stat">B</span> ipsum</p>
<p><span class="benefit-stat">0</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

需要点击两次的原因：

element.style.display 仅指 内联样式 .

最初，您的元素没有 style 属性。结果，element.style.display returns 空字符串：

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">B</span> lorem</p>
<p><span class="benefit-stat">B</span> ipsum</p>
<p><span class="benefit-stat">0</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>

糟糕但简单的解决方案：

将 style="display: block" 添加到您的初始 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">B</span> lorem</p>
<p><span class="benefit-stat">B</span> ipsum</p>
<p><span class="benefit-stat">0</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:

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">B</span> lorem</p>
<p><span class="benefit-stat">B</span> ipsum</p>
<p><span class="benefit-stat">0</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>

Answer 2

另一个选项，带有过渡动画：

    <button class="Show">Show</button>
<button class="Hide">Hide</button>
<div id="target"></div>

<style>
.Hide{display:none;}
</style>

<script>
$('.Show').click(function() {
    $('#target').show(500);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
$('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
$('.toggle').click(function() {
    $('#target').toggle('fast');
});
</script>

Show/Hide 需要双击

Show/Hide Requires a Double-click

html

javascript

css

show-hide