如何 - 可折叠/手风琴
了解如何创建手风琴（可折叠内容）。
手风琴
手风琴在您想要切换隐藏和显示大量内容之间时很有用
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;
}
/* 当按钮被点击时（使用 JS 添加 .active 类）以及鼠标悬停在按钮上时，添加背景颜色 */
.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 和 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 字符 */
}
亲自尝试 »
