【Bootstrap V4系列】学习入门教程之 组件-折叠（Collapse）

折叠（Collapse）

通过几个类和我们的JavaScript插件来切换项目中内容的可见性。

How it works

collapse JavaScript插件用于显示和隐藏内容。按钮或锚点用作触发器，映射到您切换的特定元素。折叠元素将使height 高度从其当前值动画化为0。考虑到CSS处理动画的方式，您不能在.collapse 元素上使用padding填充。相反，将类用作独立的包装元素。

一、Example

单击下面的按钮，通过类更改显示和隐藏另一个元素：

• .collapse hides content （隐藏内容）
• .collapsing is applied during transitions （在转换过程中应用折叠）
• .collapse.show shows content （显示内容）

通常，我们建议使用带有data-target属性的按钮。虽然从语义角度来看不建议使用，但您也可以使用带有href属性的链接（以及role=“button”）。在这两种情况下，都需要数据切换data-toggle="collapse"。

<!--Example-->
<!--单击下面的按钮，通过类更改显示和隐藏另一个元素-->
<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
    </div>
</div>

页面展示效果：

点击展开（显示内容）后的效果：

二、Horizontal 水平的

折叠插件还支持水平折叠。添加.width修饰符类以转换宽度而不是高度，并在直接的子元素上设置宽度。

请注意，虽然下面的示例设置了最小高度以避免在我们的文档中过度重新绘制，但这并不是明确要求的。只需要子元素上的宽度。

<!--水平的 Horizontal-->
<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Toggle width collapse
    </button>
</p>
<div style="min-height: 120px;">
    <div class="collapse width" id="collapseWidthExample">
        <div class="card card-body" style="width: 320px;">
            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
        </div>
    </div>
</div>

页面展示效果：

点击展开（显示内容）后的效果：

三、Multiple targets 多个目标

<button>或<a>可以通过在其href或data-target属性中使用JQuery选择器引用多个元素来显示和隐藏它们。多个<button>或<a>可以显示和隐藏一个元素，如果它们各自用href或data-target属性引用它

<!--Multiple targets-->
<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
                Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
                Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
            </div>
        </div>
    </div>
</div>

页面展示效果：

点击展开1（显示内容）后的效果：

点击展开2（显示内容）后的效果：

点击展开1和2（显示内容）后的效果：

四、Accordion example 手风琴示例

使用卡片组件，可以扩展默认折叠行为以创建手风琴。要正确实现手风琴风格，一定要使用.accordion作为包装。

<!--手风琴示例 Accordion example-->
<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                Some placeholder content for the second accordion panel. This panel is hidden by default.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                </button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
            </div>
        </div>
    </div>
</div>

页面展示效果：

点击展开2（显示内容）后的效果：

点击展开3（显示内容）后的效果：