Question

我有一个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>

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

Answer 1

您可以使用Readmore.js

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

<强> EXAMPLE

Answer 2

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

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

fiddle

<强>更新

解决与帖子有关的问题。

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

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

fiddle

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

希望有助于或至少为您提供一些想法。

亲切的问候。

Answer 3

这个怎么样？这将适用于类，并且可以扩展。

＆＃13;

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

＆＃13;

Answer 4

使用此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();
  });
});

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

4 个答案: