Javascript 在函数执行后显示更多/更少问题

Question

当一段文本最小化到 768 像素或以下时，我有一个“显示更多/更少”按钮。

调整大小时，通过媒体查询缩短文本，并使按钮可见。当页面再次展开到768px以上时，按钮隐藏，再次显示全文。

我的问题是，如果我将大小调整到 768px 以下并实际执行“显示更多”功能，然后再次“显示更少”，当扩展窗口(处于缩短状态)时，只会显示缩短的文本，并且要显示全文，我必须在展开窗口之前再次单击“阅读更多”。

即使在执行了按下按钮并在文本被缩短时扩展的功能之后，我如何得到它:显示全文，而不管它之前处于什么状态？

希望这不会太困惑!

function myFunction() {
  let dots = document.getElementById("dots");
  let moreText = document.getElementById("more");
  let btnText = document.getElementById("myBtn");
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

<p>
  It was akin to an early phase of one of Jose Mourinho's exit strategies as Pochettino told how he had seen these issues looming from afar and how his players must re-establish their 'mental connection' and 'togetherness'. <span id="dots">...</span>  <span id="more"> Thoughts flicked to Christian Eriksen and Toby Alderweireld, who are running down the final year of their contracts to secure lucrative free transfers next summer. Players inside the camp with ambitions elsewhere will certainly eat away at Pochettino.</span>
</p>
<button onclick="myFunction()" id="myBtn">Read more</button>

Answer 1

您可以使用 window resize当用户调整窗口大小时并添加/删除用于在查询中显示/隐藏文本的相同 css 类时触发函数的事件。希望对您有所帮助。