什麼是摺疊面板？¶
在網頁設計中，“摺疊面板”（Collapse）是一種常用的交互組件，它能將大量內容“隱藏”起來，用戶點擊後纔會展開顯示，這樣可以節省頁面空間，讓界面更簡潔。比如常見的 FAQ 列表、產品詳情的展開/收起模塊，都可以用摺疊面板實現。
爲什麼選擇 Bootstrap5 摺疊面板？¶
Bootstrap5 提供了現成的摺疊組件，無需自己寫複雜的 JavaScript 代碼，只需通過簡單的 HTML 類名和 data 屬性就能實現展開/收起效果，還能輕鬆擴展出“手風琴”等高級交互。
一、準備工作：引入 Bootstrap5¶
要使用 Bootstrap5 的摺疊面板，首先需要在 HTML 中引入 Bootstrap5 的 CSS 和 JavaScript 文件。注意：先引入 CSS，再引入 JavaScript（順序不能錯）。
<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Bootstrap5 JS（依賴 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
二、基礎摺疊面板：一個觸發，一個面板¶
最簡單的摺疊面板包含兩個部分：觸發按鈕（點擊展開/收起）和摺疊內容（默認隱藏）。
代碼示例：¶
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 摺疊面板</title>
<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<!-- 觸發按鈕 -->
<button class="btn btn-primary"
data-bs-toggle="collapse" <!-- 標記爲摺疊組件 -->
data-bs-target="#demoPanel"> <!-- 關聯摺疊面板的 ID -->
點擊展開內容
</button>
<!-- 摺疊面板內容 -->
<div class="collapse mt-2" id="demoPanel"> <!-- collapse 類默認隱藏，show 類默認顯示 -->
這裏是需要摺疊的內容！比如一段長文本、圖片或列表。
<ul class="mt-2">
<li>內容項 1</li>
<li>內容項 2</li>
<li>內容項 3</li>
</ul>
</div>
<!-- 引入 Bootstrap5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
關鍵參數說明：¶
data-bs-toggle="collapse"：告訴 Bootstrap 這是一個摺疊觸發器，點擊後會控制目標內容。data-bs-target="#demoPanel"：指定要控制的摺疊面板 ID（#是必須的，對應摺疊面板的id）。class="collapse"：默認隱藏內容，點擊後會自動顯示/隱藏。class="show"（可選）：如果想讓面板默認展開，在摺疊內容上添加show類即可。
三、手風琴效果：多個摺疊面板互斥展開¶
“手風琴”是摺疊面板的常見變體，特點是同一時間只能展開一個面板，點擊新的面板會自動收起之前展開的面板。實現方式是通過 data-bs-parent 指定共享的父容器。
代碼示例：¶
<div class="accordion" id="accordionExample"> <!-- 手風琴的父容器 -->
<!-- 面板 1 -->
<div class="accordion-item mb-2">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
data-bs-parent="#accordionExample"> <!-- 關聯父容器 ID -->
面板標題 1
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne"> <!-- 摺疊面板內容 -->
<div class="accordion-body">
這裏是面板 1 的詳細內容...
</div>
</div>
</div>
<!-- 面板 2 -->
<div class="accordion-item mb-2">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
data-bs-parent="#accordionExample">
面板標題 2
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseTwo">
<div class="accordion-body">
這裏是面板 2 的詳細內容...
</div>
</div>
</div>
</div>
關鍵點：¶
accordion類：給父容器添加，標記爲手風琴組件。accordion-item類：每個摺疊面板的外層容器，用於分組。accordion-header類：標題部分，包含accordion-button按鈕。data-bs-parent="#accordionExample"：確保點擊一個面板時，其他面板自動收起。
四、樣式與自定義¶
Bootstrap5 摺疊面板支持通過內置類快速自定義樣式，比如修改按鈕顏色、圖標等。
自定義按鈕顏色：¶
只需修改 accordion-button 或觸發按鈕的 class，例如用 btn-success 替換默認的 btn-primary：
<button class="accordion-button btn-success" ...>
添加圖標（可選）：¶
可以用 Bootstrap Icons 或 Font Awesome 圖標顯示展開/收起狀態，例如：
<button class="accordion-button" ...>
<i class="bi bi-chevron-down me-2"></i> <!-- Bootstrap Icons 向下箭頭 -->
面板標題 1
</button>
展開時，箭頭會自動旋轉（Bootstrap 會通過 CSS 控制圖標方向）。
五、總結¶
Bootstrap5 摺疊面板通過簡單的 data 屬性和類名就能實現展開/收起效果，核心是：
1. 觸發按鈕：data-bs-toggle="collapse" + data-bs-target="#xxx"；
2. 摺疊內容：class="collapse" + 可選 class="show"；
3. 手風琴效果：通過 data-bs-parent 互斥展開多個面板。
應用場景包括 FAQ、產品詳情、導航菜單等需要“隱藏/顯示”內容的地方，既能節省空間，又能提升用戶體驗。
注意事項¶
- 確保
data-bs-target或data-bs-parent的 ID 與摺疊內容的id完全一致； - 引入 Bootstrap5 時，JS 文件必須放在最後，否則摺疊功能可能失效；
- 複雜交互（如動態生成面板）可通過 JavaScript 手動控制
show()/hide()方法實現。
通過以上步驟，你已經掌握了 Bootstrap5 摺疊面板的基礎用法，動手試試吧！