wrapメソッドを使用して「read-moreread-less」を作成しようとしていますが、showmoreでのみ機能します。
したがって、基本的に、テキストが必要以上に長い場合は、テキストを削除して、続きを読むリンクを追加します（これは機能します）。削除された後、以前の長さに削除することになっている読み取りなしのリンクを追加して、read-more-linkで再度削除できるようにしますが、ここでは折り返しは機能しません。
$(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" />
<div class="card">
<ul id="kirio">
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE
TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MORE
</p>
</div>
</li>
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdas
</p>
</div>
</li>
</ul>
</div>実行するテキスト操作から関数を作成し、$(document).ready();「readless」をクリックしたときにその関数を呼び出すことができます。またclick()、「readmore」と「readless」のイベントはdocument両方ともページに動的に追加されるため、静的な親要素から委任する必要があることにも注意してください。
$(document).ready(function() {
function readMore() {
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>');
}
});
}
readMore();
$(document).on("click", ".read-more", function() {
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
$(document).on("click", ".read-less", function() {
$(this).remove();
readMore();
});
});.keimeno .more-text {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<ul id="kirio">
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE
TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MORE
</p>
</div>
</li>
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
TEXT asdasdas
</p>
</div>
</li>
</ul>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加