阅读更多 通过换行/解包阅读更少内容

Question

我正在尝试使用包装方法制作“阅读更多阅读更少”，但它仅适用于显示更多。因此，基本上，如果文本比我需要的要长，我会剥离它并添加一个阅读更多链接（有效）。在它被剥离后，我添加了一个无读链接，它应该将其剥离到以前的长度，以便可以使用读取更多链接再次取消修剪，但包装在这里不起作用。$(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/

Answer 1

您可以用您执行的文本操作创建一个函数，并在单击“更少阅读”时调用该函数。另请注意，有必要从静态父元素委派“阅读更多”和“更少阅读”的事件，因为两者都是动态添加到页面中的。$(document).ready();click()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>