显示“阅读更多”按钮

Display read more button

本文关键字：阅读更多 按钮 显示      更新时间：2023-09-26

我想在文本大于 300 个字符后使用"阅读更多"按钮。

我使用这个jQuery来解决这个问题，但它没有按照我想要的方式工作。

var $j = jQuery.noConflict();
$j('.reviewtekst').each(function() {
    var $pTag = $j(this).find('p');
    if($pTag.text().length > 300){
        var shortText = $pTag.text();
        shortText = shortText.substring(0, 300);
        $pTag.addClass('fullArticle').hide();
        $pTag.append('<a class="read-less-link">Lees minder</a>');
        $j(this).append('<p class="preview">'+shortText+'</p><div class="curtain-shadow"></div><a class="read-more-link">Read more</a>');
    }
});
$j(document).on('click', '.read-more-link', function () {
    $j(this).parent().hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
    $j(this).parent().hide().next().show();
});

请参阅此 JSFiddle： https://jsfiddle.net/8cm67cun/1/

我怎样才能使这项工作，在<p> class外显示<a> class。

这是

更新的版本 https://jsfiddle.net/8cm67cun/2/现在它可以在p 之外使用标签正常工作

$j(document).on('click', '.read-more-link', function () {
    $j(this).hide().parent().find('.preview').hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
    $j(this).parent().hide().next().show();
    $j(this).parents('.reviewtekst').find('.read-more-link').show();
});
相关文章：