如何 - 摺疊
學習如何建立一個可摺疊的部分。
可摺疊
點選按鈕在顯示和隱藏可摺疊內容之間切換。
一些可摺疊內容。點選按鈕在顯示和隱藏可摺疊內容之間切換。 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 type="button" class="collapsible">開啟可摺疊內容</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
步驟 2) 新增 CSS
樣式化手風琴
示例
/* 樣式用於開啟和關閉可摺疊內容的按鈕 */
.collapsible {
background-color: #eee;
顏色: #444;
cursor: pointer;
填充: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
字型大小: 15px;
}
/* 如果按鈕被點選（透過 JS 新增 .active 類），並且滑鼠懸停在按鈕上時，新增背景顏色 */
.active, .collapsible:hover {
background-color: #ccc;
}
/* 樣式化可摺疊內容。注意：預設隱藏 */
.content {
填充: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
步驟 3) 新增 JavaScript
示例
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
自己動手試一試 »
動畫可摺疊內容（滑動展開）
要建立動畫可摺疊內容，請為 panel 類新增 max-height: 0、overflow: hidden 以及 max-height 屬性的 transition。
然後，使用 JavaScript 透過設定一個計算出的 max-height 值來滑動展開內容，該值取決於不同螢幕尺寸下面板的高度。
示例
<style>
.content {
填充: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
自己動手試一試 »
新增圖示
在每個按鈕上新增一個符號，以指示可摺疊內容是開啟還是關閉。
示例
.collapsible:after {
content: '\02795'; /* Unicode 字元表示“加號” (+) */
字型大小: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode 字元表示“減號” (-) */
}
自己動手試一試 »
