如何在单击“阅读更多”按钮或链接时展开文本

how to expand the text on clicking the read more button or link?

本文关键字：按钮 链接 文本 阅读更多 单击      更新时间：2023-09-26

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

这是我的 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>

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

您可以使用Readmore.js

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

例

$(document).ready(function() {
    $(".expanded").hide();
    $(".expanded a, .collapsed a").click(function(eve) {
        eve.preventDefault();
        $(".expanded, .collapsed").toggle();
    });
});

小提琴

更新

解决与帖子相关的问题。

$(document).ready(function() {
    $(".expanded").hide();
    $(".expanded a, .collapsed a").click(function(eve) {
        var $container = $(this).parents("div");
        eve.preventDefault();
        $container.children(".expanded, .collapsed").toggle();
    });
});

小提琴

请注意，此代码理所当然地认为跨度包含在div 中（否则更改）。

希望对您有所帮助或至少给您一些想法。

亲切问候。

怎么样？ 这将适用于类并且是可扩展的。

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

使用这个jQuery代码片段来挖掘这个问题 

jQuery(document).ready(function() {
  jQuery(".expanded").hide();
  jQuery(".collapsed a").click(function() {
    jQuery(this).hide();
    jQuery(".expanded").slideDown();
  }); 
  jQuery(".expanded a").click(function(){
    jQuery(".expanded").slideUp();
    jQuery(".collapsed a").show();
  });
});
相关文章：