Twitter Bootstrap使用"折叠"插件扩展文本

Question

有没有人想出如何使用twitter bootstrap collapse插件显示一些文本(例如,100个字符),然后单击一个按钮展开文本以显示其余部分？

这是一个JSFiddle,它演示了我遇到的以下问题:

1. 隐藏文本显示在新行上.如果句子不会在视觉上受到干扰,那将更为可取.
2. 该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>

Answer 1

我通过添加以下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图标.

这里有一个不同的例子.

Answer 2

我同意另一篇文章说崩溃插件不适用于此.实际上很容易写出能很好地处理这个问题的东西.例如,通过将隐藏文本包装在<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/