如何創建：可折疊內容/手風琴

學習如何創建手風琴（可折疊內容）。

手風琴

當您想要在隱藏和顯示大量內容之間切換時，手風琴非常有用：

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.

親自試一試

創建手風琴

第一步 - 添加 HTML：

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

第二步 - 添加 CSS：

設置手風琴的樣式

/* 設置用于打開和關閉手風琴面板的按鈕的樣式 */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* 如果按鈕被點擊（使用 JS 添加 .active 類），則為其添加背景色，以及當鼠標懸停在上面時（懸停） */
.active, .accordion:hover {
  background-color: #ccc;
}
/* 給手風琴面板添加樣式。注意：默認是隱藏的 */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

第三步 - 添加 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";
    }
  });
}

親自試一試

動畫手風琴（向下滑動）

要制作動畫手風琴，請向面板類添加 max-height: 0、overflow: hidden 以及 max-height 屬性的過渡效果。

然后，使用 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 字符 */
}

親自試一試