twitter-bootstrap - Bootstrap Accordion - 使用 而不是 来显示更多正文

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 但使用任何内联元素时会导致 Accordion 不起作用 - 即使我使用 div 并将其设置为显示内联或内联 block 也是如此。

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

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

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> .