twitter-bootstrap Twitter Bootstrap 使用“折叠”插件扩展文本

Twitter Bootstrap expanding text using the "Collapse" plugin

提问by tim peterson

Has anyone figured out how to use twitter bootstrap collapse pluginwhere some text is shown (say, 100 characters) and you click a button to expand the text to show the rest of it?

有没有人想出如何使用twitter bootstrap 折叠插件显示一些文本（比如 100 个字符），然后单击按钮展开文本以显示其余部分？

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

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

1. The hidden text is shown on a newline. Would be preferable if sentences wouldn't be visually disrupted.
2. the icon-plus-signindicator's display isn't toggled (doesn't go away on showing hidden text and re-appear vice versa).

1. 隐藏的文本显示在新行上。如果句子不会在视觉上被打乱，那就更可取了。
2. 该icon-plus-sign指标的显示也不会切换（不会消失的显示隐藏文字和反之亦然重新出现副）。

Fully working HTML:

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

回答by mccannf

I got this to work by adding the following JavaScript:

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

And the following CSS:

以及以下 CSS：

div[data-toggle="collapse"] {
    float: left;
}

Example fiddle is here.

示例小提琴在这里。

Sidenote

边注

I personally would not use the Bootstrap collapse plugin for this. I would use a dedicated plugin like JQuery Expanderin combination with Bootstrap icons.

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

A different example fiddle is here.

一个不同的示例小提琴是here。

回答by Wesley Murch

I agree with the other post that the collapse plugin is not meant for this. It is actually quite easy to write something that handles this nicely. For example, by wrapping the hidden text in <span class="truncated">:

我同意另一篇文章的观点，即折叠插件不是为此而设计的。写一些很好地处理这个问题的东西实际上很容易。例如，通过将隐藏文本包装在<span class="truncated">：

<p>
 This is the visible part <span class="truncated">this is the hidden part.</span>
</p>

Then hide it, append the hide/show icon, and toggle state:

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

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

This takes advantage of the priority of the icon-minus-signclass over the icon-plus-signone, but you can add in a toggle for both if it makes you feel safer.

这利用了icon-minus-sign类的优先级icon-plus-sign，但如果让您感觉更安全，您可以为两者添加切换。

Demo: http://jsfiddle.net/VNdmZ/4/

演示：http: //jsfiddle.net/VNdmZ/4/