折叠是Bootstrap 4中重要的交互组件，用于：
Bootstrap 4 提供了简单易用的折叠组件，使用 .collapse 类创建可折叠内容。
<!-- 基本折叠效果 -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#basicCollapse" role="button" aria-expanded="false" aria-controls="basicCollapse">
点击切换折叠
</a>
</p>
<div class="collapse" id="basicCollapse">
<div class="card card-body">
这是一个基本的折叠内容示例。点击上面的按钮可以显示或隐藏这个内容区域。
</div>
</div>
data-target 属性指定要折叠的元素ID。
<!-- 按钮触发折叠 -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttonCollapse" aria-expanded="false" aria-controls="buttonCollapse">
按钮触发折叠
</button>
<div class="collapse mt-3" id="buttonCollapse">
<div class="card card-body">
这个折叠内容是通过按钮触发的。使用 data-target 属性指定要折叠的元素ID。
</div>
</div>
手风琴是一种特殊的折叠效果，多个折叠面板中同时只能展开一个。
.show 类。当您点击其他项目时，这个项目会自动折叠。
data-parent 属性实现。
<!-- 手风琴效果 -->
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
手风琴项目 #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
这是第一个手风琴项目的内容。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
手风琴项目 #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
这是第二个手风琴项目的内容。
</div>
</div>
</div>
<!-- 更多项目 -->
</div>
一个触发器可以控制多个折叠目标的显示和隐藏。
<!-- 多目标折叠 -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapse1" role="button" aria-expanded="false" aria-controls="multiCollapse1">切换第一个元素</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">切换第二个元素</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">切换所有元素</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body">
第一个可折叠元素的内容。
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body">
第二个可折叠元素的内容。
</div>
</div>
</div>
</div>
Bootstrap 4 也支持水平方向的折叠效果。
<!-- 水平折叠 -->
<style>
.horizontal-collapse {
height: 200px;
}
.horizontal-collapse .collapse {
width: 0;
transition: width 0.35s ease;
}
.horizontal-collapse .collapse.show {
width: 100%;
}
.horizontal-collapse .card-body {
width: 300px;
}
</style>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#horizontalCollapse" aria-expanded="false" aria-controls="horizontalCollapse">
切换水平折叠
</button>
</p>
<div class="horizontal-collapse">
<div class="collapse" id="horizontalCollapse">
<div class="card card-body">
这是一个水平折叠的示例。
</div>
</div>
</div>
通过自定义CSS，您可以创建独特的折叠样式，以适应您的设计需求。
这是一个自定义样式的折叠组件。它具有以下特点：
<!-- 自定义折叠样式 -->
<style>
.custom-collapse .btn-link {
color: #6f42c1;
text-decoration: none;
font-weight: bold;
}
.custom-collapse .btn-link:hover {
color: #e83e8c;
text-decoration: none;
}
</style>
<div class="custom-collapse">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#customCollapse" aria-expanded="false" aria-controls="customCollapse">
<i class="fas fa-chevron-down mr-2"></i>自定义折叠样式
</button>
</h5>
</div>
<div id="customCollapse" class="collapse">
<div class="card-body">
<p>这是一个自定义样式的折叠组件。</p>
</div>
</div>
</div>
</div>
Bootstrap 4 的折叠组件提供了JavaScript API，可以通过编程方式控制折叠效果。
<!-- HTML -->
<div class="mb-3">
<button id="jsCollapseButton" class="btn btn-primary" type="button">
JavaScript控制折叠
</button>
<div class="collapse mt-3" id="jsCollapse">
<div class="card card-body">
这个折叠内容是通过JavaScript控制的。
</div>
</div>
</div>
<div>
<button id="showCollapse" class="btn btn-success mr-2">显示</button>
<button id="hideCollapse" class="btn btn-warning mr-2">隐藏</button>
<button id="toggleCollapse" class="btn btn-info">切换</button>
</div>
<!-- JavaScript -->
<script>
// 显示折叠
document.getElementById('showCollapse').addEventListener('click', function() {
$('#jsCollapse').collapse('show');
});
// 隐藏折叠
document.getElementById('hideCollapse').addEventListener('click', function() {
$('#jsCollapse').collapse('hide');
});
// 切换折叠
document.getElementById('toggleCollapse').addEventListener('click', function() {
$('#jsCollapse').collapse('toggle');
});
</script>
Bootstrap 4 的折叠组件提供了多种事件，可以在折叠状态改变时执行自定义代码。
<!-- HTML -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#eventCollapse" aria-expanded="false" aria-controls="eventCollapse">
带事件处理的折叠
</button>
<div class="collapse mt-3" id="eventCollapse">
<div class="card card-body">
这个折叠组件带有事件处理。
</div>
</div>
<div class="mt-3">
<div id="eventLog" class="alert alert-info">
事件日志将显示在这里...
</div>
</div>
<!-- JavaScript -->
<script>
$('#eventCollapse').on('show.bs.collapse', function () {
document.getElementById('eventLog').innerHTML = '折叠开始显示 - show.bs.collapse 事件触发';
})
$('#eventCollapse').on('shown.bs.collapse', function () {
document.getElementById('eventLog').innerHTML += '<br>折叠完全显示 - shown.bs.collapse 事件触发';
})
$('#eventCollapse').on('hide.bs.collapse', function () {
document.getElementById('eventLog').innerHTML += '<br>折叠开始隐藏 - hide.bs.collapse 事件触发';
})
$('#eventCollapse').on('hidden.bs.collapse', function () {
document.getElementById('eventLog').innerHTML += '<br>折叠完全隐藏 - hidden.bs.collapse 事件触发';
})
</script>