如何 - 可折叠/手风琴
了解如何创建手风琴（可折叠内容）。
手风琴
当您想要在隐藏和显示大量内容之间切换时，手风琴很有用
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 字符表示“减号”(-) */
}
自己动手试一试 »
