javascript - Twitter Bootstrap 使用 "Collapse"插件扩展文本

Question

有没有人知道如何使用twitter bootstrap collapse plugin显示了一些文本(比如 100 个字符)，然后单击按钮展开文本以显示其余部分？

Here's a JSFiddle that demonstrates the following issues I'm having :

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;
}

Example fiddle is here .

旁注

我个人不会为此使用 Bootstrap 折叠插件。我会使用像 JQuery Expander 这样的专用插件结合 Bootstrap 图标。

一个不同的example fiddle is here .