Javascript Twitter引导程序使用“扩展文本”；“崩溃”；插件

有没有人知道如何使用某些文本的显示位置（例如，100个字符），然后单击按钮展开文本以显示其余部分

:

隐藏文本显示在新的行上。如果句子不会在视觉上被打乱，那就更好了

图标加号

指示器的显示未切换（显示隐藏文本时不会消失，反之亦然）

完全工作的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>

Div1：这是在被截断的前100个字符末尾的一个句子
这样，从101到无穷大的字符不会与句子开头（Div1）内联显示。
Div2：这是在前100个被截断的字符的末尾的一个句子
这样，从101到无穷大的字符不会与句子开头（Div2）内联显示。

我通过添加以下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;
}

旁注 我个人不会为此使用引导折叠插件。我会使用一个专门的插件，比如结合引导图标

---

另一个不同。

我同意另一篇文章的观点，即折叠插件不适用于此。实际上，编写一些能够很好地处理这个问题的东西是相当容易的。例如，通过在

中包装隐藏文本：

这是可见部分这是隐藏部分。

然后隐藏它，附加隐藏/显示图标，并切换状态：

$('.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
});

$（'.truncated'）.hide（）//最初隐藏文本
.after（“”）//创建切换按钮
.next（）.on（'click'，function（）{//Attach行为
$（this）.toggleClass（'icon-减号'）//交换图标
.prev（）.toggle（）；//隐藏/显示文本
});

这利用了

图标减号

类相对于

图标加号

类的优先级，但是如果您觉得更安全，您可以为两者添加一个切换

---

演示：

我同意-绝对不是“崩溃”的工作。此外，省略号是关键，否则看起来很尴尬。@mccannf感谢我看过jQuery Expander。在我看来，扩展器的切换非常难看。不太喜欢内容闪烁。我喜欢Bootstrap崩溃的流体动画，但我同意这可能不是正确的选择。非常感谢这些非常好的例子！非常有帮助！

$('.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
});