Twitter Bootstrap 使用“折叠”插件扩展文本答案

【问题标题】：Twitter Bootstrap expanding text using the "Collapse" pluginTwitter Bootstrap 使用“折叠”插件扩展文本
【发布时间】：2015-09-02 21:17:58
【问题描述】：

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

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

隐藏的文本显示在 new 行上。如果句子不会在视觉上受到干扰，那就更好了。
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 jquery twitter-bootstrap

【解决方案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 折叠插件。我会结合 Bootstrap 图标使用像 JQuery Expander 这样的专用插件。

另一个example fiddle is here。

【讨论】：

我同意 - 绝对不是“崩溃”的工作。另外，省略号是关键，否则看起来很别扭。
@mccannf 谢谢我看过 jQuery Expander。 IMO Expander 所做的切换非常难看。不是内容闪烁的忠实粉丝。我喜欢 Bootstrap 的 Collapse 的流畅动画，但我同意它可能也不适合使用。非常感谢这些非常好的例子！很有帮助！

【解决方案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/

【讨论】：