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

【问题标题】：Bootstrap accordion - use <span> instead of <div> to reveal more body copyBootstrap 手风琴 - 使用 <span> 而不是 <div> 显示更多正文
【发布时间】：2012-08-15 02:14:05
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap accordion inline html jquery-ui-accordion

【解决方案1】：

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

如果您查看 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 类。这也解释了为什么当您在 <div> 上设置 display:inline 时插件停止工作。

【讨论】：

【解决方案2】：

您可以通过添加更具体的样式轻松覆盖 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 等）

【讨论】：

【解决方案3】：

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

【讨论】：