我正在尝试使用包装方法制作“阅读更多阅读更少”,但它仅适用于显示更多。
因此,基本上,如果文本比我需要的要长,我会剥离它并添加一个阅读更多链接(有效)。在它被剥离后,我添加了一个无读链接,它应该将其剥离到以前的长度,以便可以使用读取更多链接再次取消修剪,但包装在这里不起作用。
$(document).ready(function() {
var maxLength = 490;
$(".keimeno").each(function() {
var myStr = $(this).text();
if ($.trim(myStr).length > maxLength) {
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-more">...read more</a>');
$(this).append('<span class="more-text">' + removedStr + ' <a href="javascript:void(0);" class="read-less">read less</a>' + '</span>');
}
});
$(".read-more").click(function() {
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
$(".read-less").click(function() {
$(this).remove();
$(this).siblings(".more-text").contents().wrap();
});
});
.keimeno .more-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Spicy+Rice&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
小提琴:https://jsfiddle.net/b9nsmyvu/1/
慕尼黑的夜晚无繁华
相关分类