[英]Show more and show less by Button
I want to create a button named Read More
我想创建一个名为
Read More
的按钮
Which will display some more content when clicked. 单击后将显示更多内容。 When it displays the content, the button text should be changed to be
Read less
. 当显示内容时,按钮文本应更改为
Read less
。
$(".read-more a").on("click", function() { var $link = $(this); var $content = $link.parent().prev("div.text-content"); var linkText = $link.text(); $content.toggleClass("short-text, full-text"); $link.text(getShowLinkText(linkText)); return false; }); function getShowLinkText(currentText) { var newText = ''; if (currentText.toUpperCase() === "READ MORE") { newText = "Read More"; } else { newText = "Read Less"; } return newText; }
div.text-container { margin: 0 auto; width: 75%; } .text-content{ line-height: 1em; } .short-text { overflow: hidden; height: 2em; } .full-text{ height: auto; } h1 { font-size: 24px; } .read-more { padding: 10px 0; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-container"> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="read-more"> <a href="#">Read More</a> </div> </div>
Does anyone know how to fix this issue? 有人知道如何解决此问题吗?
Any advice and/or help would be really appreciated. 任何建议和/或帮助将不胜感激。
I updated your answer. 我更新了您的答案。 Please try this.
请尝试这个。 https://jsfiddle.net/4cgbLne4/12/
https://jsfiddle.net/4cgbLne4/12/
<div class="text-container">
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div>
<button href="#" class="read-more">Read More</button>
</div>
</div>
$(".read-more").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
return false;
});
function getShowLinkText(currentText) {
var newText = '';
alert(currentText)
if (currentText.toUpperCase() === "READ MORE") {
newText = "Read Less";
} else {
newText = "Read More";
}
return newText;
}
Hope this will work for you. 希望这对您有用。
I usually solve it without Javascript, 我通常不用Java语言就能解决
.text-container { padding: 1em; border: 3px double; position: relative; padding-bottom: 3em; } .text-container .read-more { position: absolute; bottom: .5em; } input.read-more-toggle { display: none; } .read-more span { display: block; color: red; cursor: pointer; text-decoration: underline; } .read-more span:last-child { display: none; } input:checked + .read-more span:last-child { display: block; } input:checked + .read-more span:first-child { display: none; } .text-content { overflow: hidden; line-height: 1.5; } .read-more + .text-content { max-height: 3em; transition: max-height 1s; } input:checked + .read-more + .text-content { max-height: 50em; }
<div class="text-container"> <input type=checkbox id=more-text-toggle-1 class=read-more-toggle /> <label class="read-more" for="more-text-toggle-1"> <span>read more</span> <span>read less</span> </label> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> </div>
You can try this 你可以试试这个
HTML 的HTML
<div class="text-container">
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="read-more">
<button>Read More</button>
</div>
</div>
Jquery jQuery的
$(".read-more button").on("click", function() {
var $content = $link.parent().prev("div.text-content");
$content.toggleClass("short-text, full-text");
if ($(this).text() == 'Read More')
$(this).text('Read Less');
else
$(this).text('Read More');
return false;
});
There is a mistake in toggling More and Less text: 切换越来越 少的文本有一个错误:
$(".read-more a").on("click", function() { var $link = $(this); var $content = $link.parent().prev("div.text-content"); var linkText = $link.text(); $content.toggleClass("short-text, full-text"); $link.text(getShowLinkText(linkText)); }); function getShowLinkText(currentText) { var newText = ''; if (currentText.toUpperCase() == "READ MORE") { newText = "Read Less"; } else { newText = "Read More"; } return newText; }
.short-text{color:#000000} .full-text{color:#ff8800}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-container"> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="read-more"> <a href="#">Read More</a> </div> </div>
For <button>
get text by .text()
and set text by .html('text')
对于
<button>
通过.text()
获取文本,并通过.html('text')
设置文本
For <input type="button">
get text by .val()
and set text by .val('text')
对于
<input type="button">
通过.val()
获取文本,并通过.val('text')
设置文本
You only have to switch the "more" / "less" in your function: 您只需要在功能中切换“更多” /“更少”即可:
function getShowLinkText(currentText) {
var newText = '';
if (currentText.toUpperCase().trim() === "READ MORE") {
newText = "Read Less";
} else {
newText = "Read More";
}
return newText;
}
Fiddle: https://jsfiddle.net/4cgbLne4/5/ 小提琴: https : //jsfiddle.net/4cgbLne4/5/
Just added one token into this and changed condition on click of a tag 只需在其中添加一个令牌并单击标签即可更改条件
var token = 1;
$(".read-more a").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
if(token == 1)
{
$(this).text("Read Less");
token = 0;
}
else
{
$(this).text("Read More");
token = 1;
}
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.