Question

我正在尝试使用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可以实现相同的功能 - 在同一页面上会有多个手风琴。

任何指向正确方向的人都会受到赞赏。

Answer 1

由于插件的功能实现方式，使用Bootstrap的collapse插件无法与<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>时插件停止工作的原因。

Answer 2

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

Answer 3

您可以通过添加更具体的样式轻松覆盖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等设置动画”。

Bootstrap手风琴 - 使用<span>而不是<div>来显示更多正文</div> </span>

3 个答案: