if ($('.article-body').length) {
if ($(".content").length) {
  var Content = $(".content");
  var Tipstext = $(".more-content-text");
  var OpenHeight = 1200;
  Content.css('maxHeight', '');

  var Totheight = Content.height();
  var size = Math.floor(Totheight / OpenHeight) - 1;

  if (size >= 2) {
  var curr = 1;
  var percent = Math.floor(100 - (100 / size) * curr);
  Content.css('maxHeight', OpenHeight + 'px');
  Tipstext.html('點擊展開，剩餘' + percent + '%未閱讀');
  Tipstext.on("click", function() {
  getOpenMore(curr, size);
  });
  $(".pagelist").hide();
  } else {
  if (Totheight > 1500) {
  Content.css('maxHeight', OpenHeight + 'px');
  Tipstext.html('未完...展開全文');
  Tipstext.on("click", function() {
    getOpenMore(1, 1);
  });
  $(".pagelist").hide();
  } else {
  Content.css('maxHeight', '');
  $(".more-content").hide();
  $(".pagelist").show();
  }
  }

  function getOpenMore(curr_in, size) {
  if (curr_in < size - 1) {
  var curr = curr_in + 1;
  var percent = Math.floor(100 - (100 / size) * curr);
  Content.css('maxHeight', OpenHeight * curr + 'px');
  Tipstext.html('點擊展開，剩餘' + percent + '%未閱讀');
  Tipstext.on("click", function() {
    getOpenMore(curr, size);
  });
  $(".pagelist").hide();
  } else {
  Content.css('maxHeight', '');
  $(".more-content").hide();
  $(".pagelist").show();
  }
  }
}
}

<div class="more-content">
<div class="more-content-mask">
    </div>
    <div class="more-content-text">
    </div>
</div>

.more-content .more-content-text {
  font-size: 14px;
  line-height: 40px;
  margin: 0 auto;
  color: #fff;
  background: #6f98b0;
  text-align: center;
  height: 40px;
  cursor: pointer;
  width: 90%;
  display: block;
  border-radius: 50px;
}

QQ20230616133309.png(7.5 KB, 下載次數: 33)

2023-6-16 13:34 上傳