如何创建：可折叠内容/手风琴

学习如何创建手风琴（可折叠内容）。

手风琴

当您想要在隐藏和显示大量内容之间切换时，手风琴非常有用：

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 字符 */
}

亲自试一试