HTML：
<a href="#" class="show_hide" data-content="toggle-text">Read More</a>
jQuery：
// Slide Up Slide Down
$('.show_hide').toggle(function(){
$(this).text().replace("Read More", "Read Less");
$('.' + $(this).attr('data-content')).slideDown();
},function(){
$(this).text().replace("Read Less", "Read More");
$('.' + $(this).attr('data-content')).slideUp();
});
我正在尝试制作“阅读更多/阅读更少”按钮之一来隐藏和显示文本。
如何在点击时将“阅读更多”替换为“阅读更少”？
非常感谢您的意见！
您还可以使用
:visible$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(200);
});
});
我们可以使用 CSS 和 jQuery 的类切换方法
JavaScript：
function AddReadMore() {
//This limit you can set after how much characters you want to show Read More.
var carLmt = 280;
// Text to show when text is collapsed
var readMoreTxt = " ... Read More";
// Text to show when text is expanded
var readLessTxt = " Read Less";
//Traverse all selectors with this class and manupulate HTML part to show Read More
$(".addReadMore").each(function() {
if ($(this).find(".firstSec").length)
return;
var allstr = $(this).text();
if (allstr.length > carLmt) {
var firstSet = allstr.substring(0, carLmt);
var secdHalf = allstr.substring(carLmt, allstr.length);
var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
$(this).html(strtoadd);
}
});
//Read More and Read Less Click Event binding
$(document).on("click", ".readMore,.readLess", function() {
$(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
});
}
$(function() {
//Calling function after Page Load
AddReadMore();
});
CSS：
<style>
.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
display: none;
}
.addReadMore.showmorecontent .readMore {
display: none;
}
.addReadMore .readMore,
.addReadMore .readLess {
font-weight: bold;
margin-left: 2px;
color: blue;
cursor: pointer;
}
.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
display: block;
}
</style>
HTML：
<h3>Show More Content</h3>
<p class="addReadMore showlesscontent">Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt</p>
JavaScript
var defaultHeight = 20; // height when "closed"
var text = $(".text");
var textHeight = text[0].scrollHeight; // the real height of the element
var button = $(".button");
text.css({"max-height": defaultHeight, "overflow": "hidden"});
button.on("click", function(){
var newHeight = 0;
if (text.hasClass("active")) {
newHeight = defaultHeight;
text.removeClass("active");
} else {
newHeight = textHeight;
text.addClass("active");
}
text.animate({
"max-height": newHeight
}, 500);
});
CSS
.button {
background: green;
border-radius: 5px;
padding: 5px;
color: white;
text-align: center;
}
HTML
<p class="text">
Are you ready to hear the worlds best and most innovative idea that no one has ever heard of? It is the most intuitive creation of human thoughts and about to become reality.
</p>
<p class="button">read more</p>
快乐编码✌🏻😊
组件：
function MoreOrLess(show_more_snippet_jID, show_more_jID, max_chars) {
if (undefined == max_chars) max_chars = 50;
this.max_chars = max_chars;
this.show_more_snippet_jID = show_more_snippet_jID;
this.show_more_jID = show_more_jID;
this.textChanged();
let that = this;
$(this.show_more_jID).click(function () {
let them = this;
if ($(that.show_more_snippet_jID).text().length <= that.max_chars) {
$(them).fadeOut(1000);
$(that.show_more_snippet_jID).fadeOut(1000, function () {
$(that.show_more_snippet_jID).text($(that.show_more_snippet_jID).attr('txt'));
$(that.show_more_snippet_jID).fadeIn(1000);
$(them).text(' Less...');
$(them).fadeIn(1000);
});
} else {
$(them).fadeOut(1000);
$(that.show_more_snippet_jID).fadeOut(1000, function () {
$(that.show_more_snippet_jID).text($(that.show_more_snippet_jID).attr('txt').substring(0, that.max_chars));
$(that.show_more_snippet_jID).fadeIn(1000);
$(them).text(' More...');
$(them).fadeIn(1000);
});
}
});}
MoreOrLess.prototype.textChanged = function () {
let Text = $(this.show_more_snippet_jID).text();
$(this.show_more_snippet_jID).attr('txt', Text);
if (Text.length > this.max_chars) {
$(this.show_more_snippet_jID).text(Text.substring(0, this.max_chars));
$(this.show_more_jID).show();
}
else $(this.show_more_jID).hide();}
HTML：
<div style="width:200px;height:100px; overflow:auto;">
<span id="show_more_snippet">
A day after several roads in the national capital were blocked for general vehicular movement when protesting farmers digressed from the tractor rally’s original routes and drove into the city, Delhi traffic police said that normal traffic had resumed on all stretches
</span>
<span id="show_more" style="cursor:pointer; color:blue;"> More...</span>
</div>
并在文档中准备好：
let ml1 = new MoreOrLess("#show_more_snippet", "#show_more", 50);
并且每当您更改文本时，请记得致电：
ml1.textChanged();
就我而言，我必须渲染保存在数据库中的不可编辑的 HTML 内容，而所有其他解决方案都是基于文本的并破坏 HTML 内容。
我发现这个 2KB 解决方案非常适合我的情况： https://github.com/jedfoster/Readmore.js
<div class="read-more overflow-hidden">
<p>Really lengthy content.....</p>
</div>
<script>
$(".read-more").readmore();
</script>
您可以使用以下代码来替换文本，这里检查 .show_hide 类元素的文本。并根据该文本进行替换。等待回复..
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(this).html();
if(txt=='Read More'){
$(this).html('Read Less');
}else{
$(this).html('Read More');
}
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(200);
});
});
$(".click1").click(function() {
var kkk = $(this).text();
if (kkk == "Read More" ) {
$(".click1").text("Read Less");
}else {
$(".click1").text("Read More");
}
$(".load-more1").slideToggle(500);
});