Показать / Скрыть Требуется Двойной щелчок - PullRequest
Новая
       131

Показать / Скрыть Требуется Двойной щелчок

0 голосов
/ 28 апреля 2020

Я пишу основную c функцию «показать / скрыть», которая отображает блок контента и изменяет некоторый текст с «Показать больше преимуществ» на «Показать меньше преимуществ» (и наоборот).

Однако по какой-то причине, когда я нажимаю «Показать дополнительные преимущества» в первый раз, для запуска требуется два щелчка. После этого он чередуется взад и вперед одним нажатием.

Вот мой код: 

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

Есть какие-либо причины, почему это происходит? Как мне go починить?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Другой вариант с анимацией перехода: 

    <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>
0 голосов
/ 28 апреля 2020

Причина, по которой вам нужно щелкнуть дважды:

element.style.display относится только к встроенным стилям .

Изначально ваши элементы не имеют style - атрибут. В результате element.style.display возвращает пустую строку: 

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>

Плохое, но простое решение:

Добавьте 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">$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>

Лучшее решение:

Вместо переключения style.display между none и block вместо переключения универсального атрибута 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>
...