Html Bootstrap 折叠更改按钮以减少点击阅读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22090426/
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 collapse change button to read less on click
提问by Martyn
I have the following bootstrap code:
我有以下引导程序代码：
<div class="col-lg-4 col-md-4 col-sm-4" id="collapseTwo">
<h2>What</h2>
<p>Find out what we do</p>
<div id="what" class="collapse">
<p>Text here.</p>
<a class="btn btn-default" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More »</a>
</div>
On click of the button, it will display the text inside "what". I want the button to change from "read more" to "Read Less" when done. Ive found other examples but they dont seem to be with the collapse function and not sure how to implement it.
单击按钮时，它将显示“what”中的文本。我希望按钮在完成后从“阅读更多”更改为“阅读更少”。我找到了其他例子，但它们似乎没有折叠功能，也不知道如何实现它。
Any help or pointers in the right direction would be appreciated, thanks.
任何正确方向的帮助或指示将不胜感激，谢谢。
采纳答案by Martyn
I managed to solve it using an answer from:
我设法使用以下答案解决了它：
jQuery: Change button text on click
Thanks for the replies anyway!
无论如何感谢您的回复！
回答by Andrew Luca
I done this only using HTMLand CSSCheck out this example.
我仅使用HTML并CSS查看此示例来完成此操作。
[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
display: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit non deleniti reiciendis expedita, velit
excepturi doloremque numquam. Blanditiis, accusantium, at.</p>
<p>
<!-- aria-expanded attribute is mandatory -->
<!-- bootstrap changes it to true/false on toggle -->
<a href="#block-id" class="btn btn-primary" data-toggle="collapse" aria-expanded="false" aria-controls="block-id">
<span class="collapsed">
Show more
</span>
<span class="expanded">
Show Less
</span>
</a>
</p>
<p class="collapse" id="block-id">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore asperiores et vel perferendis ea
quisquam eos incidunt veritatis, hic porro voluptates temporibus laborum! Saepe natus vitae eum ex nam, laborum
optio vel magni hic. Minima pariatur molestiae error a quae sed accusantium voluptas, dolore, mollitia accusamus
laborum!
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>回答by click_twice
Here Bootstrap has collapse events. Read here : Bootstrap JS Collapse Reference
这里 Bootstrap 有崩溃事件。在这里阅读：Bootstrap JS 折叠参考
<script>
$('#extra-text').on('hidden.bs.collapse', function () {
$('#read-more').text('Read More');
});
$('#extra-text').on('shown.bs.collapse', function () {
$('#read-more').text('Read less');
});
</script>
Here extra-textis the collapsing div. and read-moreis the collapse button or a tag
这extra-text是折叠的 div。并且read-more是折叠按钮或标签
回答by HTTP
Why not just create your own jquery listener for this like
为什么不为此创建自己的 jquery 侦听器
<a class="btn btn-default" class = "readbtn" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More »</a>
$('.readbtn').on('click', function() {
$(this).html('Read less);
});
Hope I get what you were asking and if not please provide a fiddle. Thank you.
希望我能得到您的要求，如果没有，请提供小提琴。谢谢你。
回答by Roadirsh
You could try to do something like this:
你可以尝试做这样的事情：
<a class="btn btn-default" data-toggle="collapse" id="link" data-parent="#threeW" href="#what" role="button">Read More »</a>
<script>
$('#what').on('hidden.bs.collapse', function () {
$('#link').text('Read Less');
})
</script>
