使用 wrap/unwrap 多读少读

Question

我正在尝试用包装方法制作一个 'read-more read-less'，但它只适用于显示更多内容。
所以基本上，如果文本比我需要的要长，我会删除它并添加 read-more-link（有效）。在它被解开之后我添加了一个 read-less-link 应该将它剥离到它以前的长度所以它可以用 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>

jsfiddle: https://jsfiddle.net/b9nsmyvu/1/

Answer 1

您可以根据在 $(document).ready(); 上执行的文本操作创建一个函数，并在单击 "read less" 时调用该函数。另请注意，有必要从静态父元素（如 document）为 "read more" 和 "read less" 委派 click() 事件，因为两者都是动态添加到页面的。

$(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>

使用 wrap/unwrap 多读少读

Read more read less with wrap/unwrap

html

javascript

css

jquery

show-hide