我找到了这段代码:
我发现了这个链接:link
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
if(linkText === "SHOW MORE"){
linkText = "Show less";
$content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 400);
};
$this.text(linkText);
});
CSS:
div.text-container {
margin: 0 auto;
width: 75%;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showContent{
height: auto;
}
h1 {
font-size: 24px;
}
p {
padding: 10px 0;
}
.show-more {
padding: 10px 0;
text-align: center;
}
这正是我要找的内容,但你可以看到,如果你进行修改(link),如果只有一两行,则会出现“显示更多”链接,此时不需要它。 谢谢您的回答!
showContent
和hideContent
函数。 - Asad SaeeduddinclientHeight
和scrollHeight
,并将它们相互比较以决定是否需要显示链接。请参阅我的答案以获取更多详细信息和工作演示。 - Nope