twitter-bootstrap Bootstrap“阅读更多”按钮 - 如何在没有时差的情况下折叠和更改按钮文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46023277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap "read more" button - how to collapse and change button text with no time difference?
提问by Annie H.
I have a layout created with bootstrap and there is this “read more” button that expands text. When text is expanded it changes to “show less”. My problem is that when user clicks to “show less” button, button-text firstly changes back to “read more” and only THEN text(paragraph) is collapsed. And this time difference is noticeable. But is there a way to make button change its text after the text is collapsed or somehow make this time difference less noticeable?
我有一个用 bootstrap 创建的布局，有一个“阅读更多”按钮可以扩展文本。当文本被展开时，它会变成“减少显示”。我的问题是，当用户点击“减少显示”按钮时，按钮文本首先变回“阅读更多”，然后只有文本（段落）被折叠。而且这个时差很明显。但是有没有办法让按钮在文本折叠后更改其文本，或者以某种方式使这个时间差异不那么明显？
In my js file there's only code for button text changing, and text toggling is entirely on bootstrap, maybe I shouldn't use bootstrap for this particular button?
在我的 js 文件中，只有按钮文本更改的代码，文本切换完全在引导程序上，也许我不应该对这个特定按钮使用引导程序？
Note that my problem is not about changing button text from “read more” to “show less” itself, I know there's a lot of solutions around.
请注意，我的问题不是将按钮文本从“阅读更多”更改为“显示更少”本身，我知道有很多解决方案。
Markup for "read more" button:
“阅读更多”按钮的标记：
<p>Initital text <span id="moreText" class="collapse">more text here...</span><a id="readMore" data-toggle="collapse" href="#moreText">Read More</a>
JS for button:
按钮的JS：
$(function() {
$('#readMore').click(function() {
$(this).text(function(i,def) {
return def=='Read More' ? 'Show Less' : 'Read More';
});
})
});
回答by user2851148
I had the same problem, I solved it through a little of css and Bootstrap 4
我遇到了同样的问题，我通过一些 css 和 Bootstrap 4 解决了它
#summary {
font-size: 14px;
line-height: 1.5;
}
#summary p.collapse:not(.show) {
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#summary p.collapsing {
min-height: 42px !important;
}
#summary a.collapsed:after {
content: '+ Read More';
}
#summary a:not(.collapsed):after {
content: '- Read Less';
}
Here example -> Read Less - Bootstrap 4
这里的例子 ->少读 - Bootstrap 4
回答by CynicalSection
Use collapse events, it seems that hidden.bs.collapseit is what you need as it fires after the element has closed. Check documentationfor details.
使用折叠事件，它似乎hidden.bs.collapse是您需要的，因为它在元素关闭后触发。查看文档了解详细信息。
$('#myElementWithCollpse').on('hidden.bs.collapse', function () {
//set text here
})
回答by Kunvar Singh
HTML Code:
HTML代码：
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</body>
</html>
JS Code:
JS代码：
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
