3

我正在尝试使用 Boostrap 来显示更多的正文 - 所以需要显示的内容与介绍文本内联。我在末尾使用更多链接作为触发器，如下所示：

<p>
 Intro text <span id="intro" class="collapse"> the rest of the sentence.</span>
 <a data-toggle="collapse" data-target="#intro"> More</a>
</p>

这在使用 div 时有效，但使用任何内联元素会导致手风琴不起作用 - 即使我使用 div 并将其设置为显示内联或内联块。

有谁知道如何在内联元素上进行这项工作？或者是否有不同的 jquery 插件或一些简单的 jquery 可以实现相同的目标 - 同一页面上会有多个手风琴。

任何正确方向的指针将不胜感激。

4

3 回答 3

3

由于插件的功能是如何实现的，使用 Bootstrap 的collapse插件将不适用于像 s 这样的内联元素。<span>

如果您查看 Bootstrap CSS，您会看到以下规则：

.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
       -moz-transition: height 0.35s ease;
        -ms-transition: height 0.35s ease;
         -o-transition: height 0.35s ease;
            transition: height 0.35s ease;
}

.collapse.in {
    height: auto;
}

因此，.collapse通过将元素height设为零和设置，可以有效地隐藏元素overflow:hidden。

但是，内联元素（如您的span）不接受高度或垂直填充等样式。.collapse因此，即使添加了类，您的跨度也将始终可见。这也解释了为什么当您display:inline在<div>.

于 2012-08-15T02:33:58.423 回答
1

使用正确的搜索词后，我发现并暗示了以下内容：http: //viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

于 2012-08-15T02:22:35.040 回答
1

您可以通过添加更具体的样式轻松覆盖 Bootstrap 的默认折叠样式。只需确保正确覆盖它们设置的所有样式 - 默认情况下，折叠是通过动画属性完成的，因此如果您不希望启动高度动画，则height必须确保包含所有三种折叠状态。height: auto

例如，您可以span通过像这样淡出它们来折叠内联元素：

span.collapse {
    display: inline;
    position: static;
    height: auto;
    opacity: 0;
    -webkit-transition: opacity 0.35s ease;
       -moz-transition: opacity 0.35s ease;
        -ms-transition: opacity 0.35s ease;
         -o-transition: opacity 0.35s ease;
            transition: opacity 0.35s ease;
}
span.collapsing {
    display: inline;
    position: static;
    height: auto;
    opacity: 0;
    -webkit-transition: opacity .35s ease;
         -o-transition: opacity .35s ease;
            transition: opacity .35s ease;
}
span.collapse.in {
    display: inline;
    position: static;
    opacity: 1;
    height: auto;
}

（使用这种方法折叠时它们仍会占用流中的空间，因此根据您的布局需要，您必须设置display:none折叠状态或设置display:inline-block所有状态才能为元素设置动画width等）

于 2014-11-05T09:59:46.403 回答