我有一长段文本，用 js 隐藏它并只显示前 150 个字母。单击“阅读更多”按钮后，它会显示其余内容。我的目标是在整个文本出现后将“阅读更多”链接更改为类似的“隐藏”按钮。
点击“隐藏”链接文本后，隐藏到 150 个字母，并且“阅读更多”按钮再次出现。
如何使用此代码执行此操作？
https://codepen.io/anon/pen/aygeyj
$('.review-item__text').each(function(event){
var max_length = 150;
if($(this).html().length > max_length){
var short_content = $(this).html().substr(0,max_length);
var long_content = $(this).html().substr(max_length);
$(this).html(short_content+
'<span>...</span>'+
'<a href="#" class="read_more">Read more</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>');
$(this).find('a.read_more').click(function(event){
event.preventDefault();
$(this).hide();
$(this).parents('.review-item__text').find('.more_text').show();
});
}
});
最佳答案
检查此代码。
$('.review-item__text').each(function(event){
var max_length = 150;
if($(this).html().length > max_length){
var short_content = $(this).html().substr(0,max_length);
var long_content = $(this).html().substr(max_length);
$(this).html(short_content+
'<span>...</span>'+
'<a href="#" class="read_more">Read more</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>');
$(this).find('a.read_more').click(function(event){
event.preventDefault();
var more_text = $(this).parents('.review-item__text').find('.more_text');
if(more_text.is(':visible')){
$(this).html('Read More');
$(this).parents('.review-item__text').find('.more_text').hide();
$(this).appendTo($(this).parents('.review-item__text'));
}else{
$(this).html('Hide Extra');
$(this).parents('.review-item__text').find('.more_text').show();
$(this).appendTo($(this).parents('.review-item__text').find('.more_text'));
}
});
}
});
关于javascript - 点击后需要隐藏一段文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46241776/