阅读更多不适用于html格式的按钮脚本



我正在尝试将阅读更多功能添加到一些文本中,其中包括标题和段落。但它将所有文本显示在一行中。我希望在点击阅读更多时文本格式化。

这是我正在使用的代码:

$(function() {
var minimized_elements = $('.case-desc');
minimized_elements.each(function() {
var t = $(this).text();
if (t.length < 200) return;
$(this).html(
t.slice(0, 200) + '<span>... </span><a href="" class="umore">More</a>' +
'<span style="display:none;">' + t.slice(200, t.length) + ' <a href="" class="uless">Less</a></span>'
);
});
$('a.umore', minimized_elements).click(function(event) {
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.uless', minimized_elements).click(function(event) {
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
});

有没有可能得到格式化的文本,因为我不能删除标题,并想按原样显示。

以下是我的文本的样子

什么是Lorem Ipsum

Lorem Ipsum只是印刷和排版行业的伪文本。

自15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一位未知的打印机拿走了一个打字盘,并将其搅乱以制作一本打字样本书。

但我得到了

什么是Lorem Ipsum?Lorem Ipsum只是印刷和排版行业的伪文本。自15世纪以来,Lorem Ipsum一直是该行业的标准伪文本,当时一位不知名的印刷商拿走了一个打字盘,并将其搅乱以制作一本打字样本书。

jQuery(document).ready(function() {
length = 200;
cHtml = jQuery(".case-desc").html();
cText = jQuery(".case-desc").html().substr(0, length).trim();
jQuery(".case-desc").addClass("compressed").html(cText + "... <a href='#' class='rmore'>More</a>");
window.handler = function() {
jQuery('.rmore').click(function() {
if (jQuery(".case-desc").hasClass("compressed")) {
jQuery(".case-desc").html(cHtml + "<a href='#' class='rmore'>Less</a>");
jQuery(".case-desc").removeClass("compressed");
handler();
return false;
} else {
jQuery(".case-desc").html(cText + "... <a href='#' class='rmore'>More</a>");
jQuery(".case-desc").addClass("compressed");
handler();
return false;
}
});
}
handler();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="case-desc">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

最新更新