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

Muhammad Kamran 发表于 Dev

穆罕默德·卡姆兰

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

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

发生

$(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中是理所当然的（否则请进行更改）。

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

亲切的问候。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。