Wordpress：阅读更多移动文本不起作用答案

【问题标题】：Wordpress: Read More Text For Mobile not workingWordpress：阅读更多移动文本不起作用
【发布时间】：2023-02-02 20:54:27
【问题描述】：

我正在使用阅读更多脚本，它会在末尾显示一个按钮，文本显示较少。该脚本运行良好，但我在各个部分使用了该脚本，并使用部分类根据我的要求更新了阅读更多文本的长度。但是当我显示较少时，它添加了 100 像素高度的内联 CSS，这给移动设备显示第一段带来了问题，我添加了一个很大的高度，但在显示较少后，它添加了 100 像素的高度，如行高度。

这是脚本。

jQuery('.read-more__btn').click(function(){
  if(jQuery(this).siblings(".read-more__text").hasClass("show")){
    jQuery(this).removeClass("up");
    jQuery(this).text("Read More");
    jQuery(this).siblings(".read-more__text").animate({
        height: '100px'
    }, 1000);
    jQuery(this).siblings(".read-more__text").removeClass("show");
  } else {
    jQuery(this).siblings(".read-more__text").addClass("show");
    jQuery(this).siblings(".read-more__text").animate({
      height: jQuery(this).siblings(".read-more__text").get(0).scrollHeight
    }, 1000, function(){
      jQuery(this).height('auto');
    });
    jQuery(this).addClass("up");
    jQuery(this).text("Read Less");
  }
});

【问题讨论】：

“但是当我显示较少时，它会为 100 像素的高度添加内联 CSS，这会给移动设备带来问题，以显示我添加了较大高度的第一段，”- 所以问题是100px对于移动设备来说太大了？如果是这样，也许您应该使用另一个单位，例如vh，请参阅mdn on css values and units。
如果我使用 vh，它会变得太长
不要使用100vh，阅读文档中的描述并相应地调整值。

标签： javascript html jquery wordpress

【解决方案1】：

请查看下面的一些基本示例以了解更多和更少内容，可能会对您有所帮助。

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var 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";
  }
}
</script>

here 你可以查看示例链接

【讨论】：