javascript - 如何在单击阅读更多按钮或链接时扩展文本？

Question

我有一个 js 函数，可以在两个文本范围之间切换。一个是折叠类的较小文本，另一个是扩展类的全文。

这是我的代码

$(document).ready(function() {
    $(".expanded").hide();

    $(".expanded, .collapsed").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });
});

我的 html 看起来像这样

<span class="collapsed">
 some small text
 <a href="javascript:void(0)"> READ MORE>></a>
</span>

<span class="expanded">
 here come the full text to replace the small text
 <a href="javascript:void(0)">Less>></a>
</span>

预设功能将一个部分的文本替换为另一个。我的问题是，当我们单击折叠或展开的任何跨度的任何部分时，文本都会更改。我想限制它仅在单击阅读更多>>或更少>>链接时更改文本。我在这个设计中已经走了这么远，现在我不能改变这个功能。我想在保持现有功能的同时进行更改。有任何想法吗？？

Answer 1

您可以使用 Readmore.js

$('#read').readmore({
  speed: 75,
  maxHeight: 100
});

EXAMPLE