Bootstrap 折叠

🎯 概述

Bootstrap 折叠（Collapse）组件用于显示和隐藏内容。它可以通过按钮或链接触发，常用于创建手风琴效果、FAQ 页面、导航菜单等场景。

📦 基本用法

简单折叠

使用 data-bs-toggle="collapse" 和 data-bs-target 属性创建基本折叠：

html

<!-- 触发按钮 -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    切换内容
</button>

<!-- 折叠内容 -->
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        这是折叠的内容。点击按钮可以显示或隐藏这段内容。
    </div>
</div>

使用链接触发

html

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseLink" role="button">
    使用链接触发
</a>

<div class="collapse" id="collapseLink">
    <div class="card card-body">
        通过链接触发的折叠内容。
    </div>
</div>

🎨 多个目标

一个按钮可以控制多个折叠元素：

html

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
    切换两个元素
</button>

<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>

🎪 手风琴效果

使用 data-bs-parent 属性创建手风琴效果，确保同一时间只有一个面板展开：

html

<div class="accordion" id="accordionExample">
    <!-- 第一项 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                手风琴项目 #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                这是第一个项目的内容。默认显示。
            </div>
        </div>
    </div>
    
    <!-- 第二项 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                手风琴项目 #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                这是第二个项目的内容。
            </div>
        </div>
    </div>
    
    <!-- 第三项 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                手风琴项目 #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                这是第三个项目的内容。
            </div>
        </div>
    </div>
</div>

🎨 手风琴样式

始终展开的手风琴

移除 data-bs-parent 属性，允许多个项目同时展开：

html

<div class="accordion" id="accordionPanelsStayOpen">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne">
                项目 #1
            </button>
        </h2>
        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                可以同时展开多个项目。
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo">
                项目 #2
            </button>
        </h2>
        <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                这个项目也可以独立展开。
            </div>
        </div>
    </div>
</div>

扁平化手风琴

使用 .accordion-flush 类创建无边框的手风琴：

html

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
                扁平化项目 #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">扁平化样式的内容</div>
        </div>
    </div>
</div>

💻 JavaScript 方法

初始化

javascript

// 通过 JavaScript 初始化
const collapseElement = document.getElementById('myCollapse');
const collapse = new bootstrap.Collapse(collapseElement, {
    toggle: false
});

方法调用

javascript

const myCollapse = document.getElementById('myCollapse');
const bsCollapse = new bootstrap.Collapse(myCollapse);

// 显示折叠内容
bsCollapse.show();

// 隐藏折叠内容
bsCollapse.hide();

// 切换折叠状态
bsCollapse.toggle();

// 销毁折叠实例
bsCollapse.dispose();

配置选项

javascript

const collapse = new bootstrap.Collapse(element, {
    parent: '#myAccordion',  // 父元素选择器
    toggle: true             // 初始化时是否切换
});

🎭 事件监听

javascript

const myCollapse = document.getElementById('myCollapse');

// 即将显示时触发
myCollapse.addEventListener('show.bs.collapse', function () {
    console.log('即将显示');
});

// 显示完成后触发
myCollapse.addEventListener('shown.bs.collapse', function () {
    console.log('显示完成');
});

// 即将隐藏时触发
myCollapse.addEventListener('hide.bs.collapse', function () {
    console.log('即将隐藏');
});

// 隐藏完成后触发
myCollapse.addEventListener('hidden.bs.collapse', function () {
    console.log('隐藏完成');
});

🌟 实际示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 折叠示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 折叠示例</h1>
        
        <!-- 基本折叠 -->
        <h2>基本折叠</h2>
        <div class="mb-4">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#basicCollapse">
                点击切换内容
            </button>
            <div class="collapse mt-2" id="basicCollapse">
                <div class="card card-body">
                    这是一个基本的折叠内容示例。点击按钮可以显示或隐藏这段文字。
                </div>
            </div>
        </div>
        
        <!-- 多个触发器 -->
        <h2>多个触发器</h2>
        <div class="mb-4">
            <button class="btn btn-primary me-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiTrigger">
                按钮触发
            </button>
            <a class="btn btn-secondary" data-bs-toggle="collapse" href="#multiTrigger" role="button">
                链接触发
            </a>
            <div class="collapse mt-2" id="multiTrigger">
                <div class="card card-body">
                    这个折叠内容可以被多个触发器控制。
                </div>
            </div>
        </div>
        
        <!-- 水平折叠 -->
        <h2>水平折叠</h2>
        <div class="mb-4">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidth">
                切换宽度
            </button>
            <div style="min-height: 120px;">
                <div class="collapse collapse-horizontal mt-2" id="collapseWidth">
                    <div class="card card-body" style="width: 300px;">
                        这是一个水平折叠的示例。内容从左侧展开。
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 标准手风琴 -->
        <h2>标准手风琴</h2>
        <div class="accordion mb-4" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        什么是 Bootstrap？
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Bootstrap 是一个流行的前端框架，用于快速开发响应式网站和 Web 应用程序。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                        Bootstrap 的优势是什么？
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Bootstrap 提供了丰富的组件、响应式网格系统、预定义的样式和强大的 JavaScript 插件。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                        如何开始使用 Bootstrap？
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        你可以通过 CDN 引入 Bootstrap，或者使用 npm 安装到你的项目中。
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 扁平化手风琴 -->
        <h2>扁平化手风琴</h2>
        <div class="accordion accordion-flush mb-4" id="accordionFlush">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
                        扁平化项目 #1
                    </button>
                </h2>
                <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
                    <div class="accordion-body">这是扁平化手风琴的第一项内容。</div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo">
                        扁平化项目 #2
                    </button>
                </h2>
                <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
                    <div class="accordion-body">这是扁平化手风琴的第二项内容。</div>
                </div>
            </div>
        </div>
        
        <!-- FAQ 示例 -->
        <h2>FAQ 示例</h2>
        <div class="accordion" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                        如何安装 Bootstrap？
                    </button>
                </h2>
                <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p>你可以通过以下方式安装 Bootstrap：</p>
                        <ul>
                            <li>使用 CDN 链接</li>
                            <li>通过 npm: <code>npm install bootstrap</code></li>
                            <li>下载源文件</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                        Bootstrap 支持哪些浏览器？
                    </button>
                </h2>
                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Bootstrap 5 支持所有主流浏览器的最新稳定版本，包括 Chrome、Firefox、Safari、Edge 等。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                        Bootstrap 是免费的吗？
                    </button>
                </h2>
                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        是的，Bootstrap 是完全免费和开源的，采用 MIT 许可证。
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 监听折叠事件
        const basicCollapse = document.getElementById('basicCollapse');
        basicCollapse.addEventListener('show.bs.collapse', function () {
            console.log('折叠内容即将显示');
        });
        basicCollapse.addEventListener('shown.bs.collapse', function () {
            console.log('折叠内容已显示');
        });
    </script>
</body>
</html>

✅ 最佳实践

1. 可访问性

html

<!-- 使用 aria 属性提高可访问性 -->
<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>

2. 语义化 HTML

html

<!-- 在手风琴中使用语义化标签 -->
<div class="accordion" id="semanticAccordion">
    <section class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#section1">
                章节标题
            </button>
        </h2>
        <div id="section1" class="accordion-collapse collapse show" data-bs-parent="#semanticAccordion">
            <div class="accordion-body">
                章节内容
            </div>
        </div>
    </section>
</div>

3. 性能优化

javascript

// 避免频繁初始化，使用单例模式
const getOrCreateCollapse = (element) => {
    return bootstrap.Collapse.getOrCreateInstance(element);
};

4. 响应式设计

html

<!-- 在移动设备上默认展开 -->
<div class="collapse d-md-none show" id="mobileContent">
    <div class="card card-body">
        移动设备上默认显示的内容
    </div>
</div>

🎯 常见应用场景

FAQ 页面 - 问答列表
导航菜单 - 可折叠的侧边栏
内容展示 - 显示/隐藏详细信息
表单分组 - 分步骤表单
移动端菜单 - 响应式导航

下一步

现在你已经掌握了 Bootstrap 折叠组件的使用方法，接下来我们将学习导航组件。

下一章：Bootstrap 导航 →

Bootstrap 折叠 ​

🎯 概述 ​

📦 基本用法 ​

简单折叠 ​

使用链接触发 ​

🎨 多个目标 ​

🎪 手风琴效果 ​

🎨 手风琴样式 ​

始终展开的手风琴 ​

扁平化手风琴 ​

💻 JavaScript 方法 ​

初始化 ​

方法调用 ​

配置选项 ​

🎭 事件监听 ​

🌟 实际示例 ​

✅ 最佳实践 ​

1. 可访问性 ​

2. 语义化 HTML ​

3. 性能优化 ​

4. 响应式设计 ​

🎯 常见应用场景 ​

下一步 ​

Bootstrap 折叠

🎯 概述

📦 基本用法

简单折叠

使用链接触发

🎨 多个目标

🎪 手风琴效果

🎨 手风琴样式

始终展开的手风琴

扁平化手风琴

💻 JavaScript 方法

初始化

方法调用

配置选项

🎭 事件监听

🌟 实际示例

✅ 最佳实践

1. 可访问性

2. 语义化 HTML

3. 性能优化

4. 响应式设计

🎯 常见应用场景

下一步