Bootstrap Collapse

最新推荐文章于 2024-01-26 11:59:28 发布

Lo-ra

最新推荐文章于 2024-01-26 11:59:28 发布

阅读量427

点赞数

本文介绍了一种利用Bootstrap框架实现的折叠插件，该插件通过简单的类切换来控制元素的显示与隐藏，适用于创建可折叠的内容区块。文章提供了使用示例，包括如何通过链接或按钮触发折叠行为，并展示了如何构建手风琴式的折叠面板组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flexible plugin that utilizes a handful of classes for easy toggle behavior.

Plugin dependency

Collapse requires the transitions plugin to be included in your version of Bootstrap.

Example

Click the buttons below to show and hide another element via class changes:

.collapse hides content
.collapsing is applied during transitions
.collapse.in show content

Use a link with the href attribute,or a button with the data-target attribute.In both cases,the data-toggle="collapse" is required

<a href="#collapseExample" class="btn btn-primary" role="button" data-toggle="collapse" 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>

Accordion

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion" aria-controls="collapseOne" aria-expanded="true">
                        Collapse Group #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpane1" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a href="#collapseTwo" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="collapseTwo">
                        Collapse Group #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>