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

问题描述

我有一个 js 函数，可以在两个文本跨度之间切换.一种是类折叠的较小文本，另一种是类展开的全文.

I have a js function which toggles between two spans of texts. One is smaller text with class collapsed and the other is full text with class expanded.

这是我的js

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

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

我的html看起来像这样

and my html look like this

<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>> 或 Less>> 链接时更改文本.我已经在这个设计中走得太远了，我现在不能改变这个功能.我希望在保持现有功能的同时进行更改.有任何想法吗??

The preset function replaces the text of one part with another. My problem is that when we click on any part of any span either collapsed or expanded, the text is changed. I want to restrict it to change the text only when one click the READ MORE>> or Less>> link. I have gone so far in this design that I cant change the function now. I want changes while staying the in present function. Any ideas??

推荐答案

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

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

小提琴

更新

解决与帖子相关的问题.

To solve the problem related to the posts.

$(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 中(否则更改).

Note that this code takes for granted that the spans are contained in a div (change if otherwise).

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

Hope that helps or at least gives you some ideas.

亲切的问候.

这篇关于如何在单击“阅读更多"按钮或链接时展开文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！