Bootstrap - 折叠：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap最实用的组件之一：折叠（Collapse）。把它想象成网页上的魔术技巧——现在你能看到它，现在你又看不到它！让我们一起开始这段激动人心的旅程。

Bootstrap - Collapse

什么是Bootstrap折叠？

在我们跳入代码之前，让我们先了解一下折叠是什么。想象一下，你的网站上有一篇长文章，但你不想一次性向访问者展示所有的文本。这时折叠组件就派上用场了！它允许你通过简单的点击来隐藏和显示内容，使你的网页更具交互性和用户友好性。

基本示例

让我们从一个基本示例开始，以便我们能够入门。

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
点击我，揭示一个秘密！
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
秘密是……你学习Bootstrap真是太棒了！
</div>
</div>

让我们分解一下：

我们有一个按钮（样式化为链接），用于触发折叠。
data-bs-toggle="collapse" 属性告诉Bootstrap这个元素控制着一个可折叠的区域。
href="#collapseExample" 指向折叠内容的ID。
可折叠内容被包裹在一个带有 collapse 类和与按钮中的href相匹配的ID的div中。

当你点击按钮时，Bootstrap的JavaScript魔法就会发生，然后你的内容就会出现或消失。

水平折叠

现在，让我们用一个水平折叠来增加一些趣味。就像你的内容在玩捉迷藏，但是是横向的！

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
切换宽度折叠
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
这是水平折叠的一些占位内容。默认情况下是隐藏的，触发时会显示。
</div>
</div>
</div>

这里的关键区别是：

我们使用了 collapse-horizontal 类以及 collapse。
我们在可折叠内容上设置了一个特定的宽度。
带有 min-height 的外部div确保在切换折叠时其他元素不会跳来跳去。

多重切换和目标

现在，让我们创建一组折叠元素交响曲！我们可以有多个按钮控制不同的（或相同的）可折叠区域。

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">切换第一个元素</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">切换第二个元素</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">切换所有元素</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
这个多折叠示例的第一个折叠组件的一些占位内容。
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
这个多折叠示例的第二个折叠组件的一些占位内容。
</div>
</div>
</div>
</div>

这里发生的事情是：

我们有三个按钮：两个控制单个折叠，一个控制所有折叠。
第三个按钮使用 .multi-collapse 来指向所有可折叠区域。
每个可折叠区域都有一个唯一的ID和 multi-collapse 类。

无障碍

作为负责任的开发者，我们需要确保我们的网站对每个人都是可访问的。Bootstrap的折叠组件带有内置的无障碍功能，但我们还可以增强它们：

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
无障碍折叠按钮
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
这个内容是隐藏的，但是对屏幕阅读器是可访问的。
</div>
</div>

关键的无障碍功能：

aria-expanded 属性告诉屏幕阅读器当前可折叠内容是否可见。
aria-controls 属性将按钮与可折叠内容关联起来。

方法表格

这里是一个方便的折叠方法表格，你可以在JavaScript中使用它们：

方法	描述
`collapse('toggle')`	切换一个可折叠元素
`collapse('show')`	显示一个可折叠元素
`collapse('hide')`	隐藏一个可折叠元素
`collapse('dispose')`	销毁一个元素的折叠

要使用这些方法，你可以这样做：

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

就这样，伙计们！你已经掌握了Bootstrap折叠的艺术。记住，熟能生巧，所以不要害怕用这些示例进行实验。在你意识到之前，你将能够创建出像折纸一样折叠和展开的网页！

快乐编码，愿你的折叠总是顺利，你的切换总是灵敏！

Credits: Image by storyset