如何创建 - 可折叠内容(Collapsibles/Accordion)
了解如何创建可折叠内容。
可折叠
当您想要在隐藏和显示大量内容之间切换时，可折叠很有用:
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">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>
步骤 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";
}
});
}
亲自试一试 »
动画可折叠内容
要制作动画可折叠内容，请将 max-height: 0, overflow: hidden 和 transition 属性的转换添加到 panel 面板类。
然后，使用 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';
/* "plus" 符号 (+) 的 Unicode 字符 */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* "minus" 符号的 Unicode 字符 (-) */
}
亲自试一试 »
