[英]Twitter Bootstrap expanding text using the “Collapse” plugin
有沒有人想出如何使用twitter bootstrap collapse插件顯示一些文本(例如,100個字符),然后單擊一個按鈕展開文本以顯示其余部分?
icon-plus-sign
指示符的顯示不會切換(顯示隱藏文本時不會消失,反之亦然)。 完全正常的HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="" data-toggle="collapse" data-target="#div1" >
<span><b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div1" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div>
<div class="" data-toggle="collapse" data-target="#div2" >
<span><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div2" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>
我通過添加以下JavaScript來實現此目的:
$("div").on("hide", function() {
$(this).prev("div").find("i").attr("class","icon-plus-sign");
$(this).css("display","");
$(this).css("height","5px");
});
$("div").on("show", function() {
$(this).prev("div").find("i").attr("class","icon-minus-sign");
$(this).css("display","inline");
$(this).css("height","5px");
});
以下CSS:
div[data-toggle="collapse"] {
float: left;
}
示例小提琴在這里 。
我個人不會為此使用Bootstrap崩潰插件。 我會使用像JQuery Expander這樣的專用插件和Bootstrap圖標。
我同意另一篇文章說崩潰插件不適用於此。 實際上很容易寫出能很好地處理這個問題的東西。 例如,通過將隱藏文本包裝在<span class="truncated">
:
<p>
This is the visible part <span class="truncated">this is the hidden part.</span>
</p>
然后隱藏它,附加隱藏/顯示圖標,並切換狀態:
$('.truncated').hide() // Hide the text initially
.after('<i class="icon-plus-sign"></i>') // Create toggle button
.next().on('click', function(){ // Attach behavior
$(this).toggleClass('icon-minus-sign') // Swap the icon
.prev().toggle(); // Hide/show the text
});
這利用了icon-minus-sign
類的優先級優於icon-plus-sign
,但如果它讓你覺得更安全,你可以添加兩者的切換。
演示: http : //jsfiddle.net/VNdmZ/4/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.