为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

DIEA 2022-09-23 17:01:33

我正在尝试使用包装方法制作“阅读更多阅读更少”,但它仅适用于显示更多。

因此,基本上,如果文本比我需要的要长,我会剥离它并添加一个阅读更多链接(有效)。在它被剥离后,我添加了一个无读链接,它应该将其剥离到以前的长度,以便可以使用读取更多链接再次取消修剪,但包装在这里不起作用。


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




查看完整描述

1 回答

?
慕尼黑的夜晚无繁华

TA贡献1519条经验 获得超6个赞

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


查看完整回答
反对 回复 3天前
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信