如何 - 可摺疊/手風琴
瞭解如何建立手風琴（可摺疊內容）。
手風琴
當您想要在隱藏和顯示大量內容之間切換時，手風琴很有用
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
建立一個手風琴
步驟 1) 新增 HTML
示例
<button class="accordion">第 1 節</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">第 2 節</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">第 3 節</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
步驟 2) 新增 CSS
手風琴樣式
示例
/* 用於開啟和關閉手風琴面板的按鈕樣式 */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* 如果按鈕被點選（新增 .active 類與 JS），以及當滑鼠懸停在上面時，為按鈕新增背景顏色 */
.active, .accordion:hover {
background-color: #ccc;
}
/* 手風琴面板樣式。注意：預設隱藏 */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
步驟 3) 新增 JavaScript
示例
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* 切換新增和移除 "active" 類，
以突出控制面板的按鈕 */
this.classList.toggle("active");
/* 切換隱藏和顯示活動面板 */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
自己動手試一試 »
動畫手風琴（下滑）
要製作動畫手風琴，請在 panel 類中新增 max-height: 0、overflow: hidden 和針對 max-height 屬性的 transition。
然後，使用 JavaScript 透過設定一個根據面板在不同螢幕尺寸下的高度計算出的 max-height 來下滑內容
示例
<style>
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
自己動手試一試 »
新增圖示
為每個按鈕新增一個符號，以指示可摺疊內容是開啟還是關閉
示例
.accordion:after {
content: '\02795'; /* Unicode 字元表示“加號”(+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode 字元表示“減號”(-) */
}
自己動手試一試 »
