如何 - 折叠
了解如何创建一个可折叠的部分。
可折叠
单击按钮可在显示和隐藏可折叠内容之间切换。
一些可折叠内容。单击按钮可在显示和隐藏可折叠内容之间切换。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 type="button" class="collapsible">打开可折叠</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
步骤 2) 添加 CSS
样式化手风琴
示例
/* 样式化用于打开和关闭可折叠内容的按钮 */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* 如果单击按钮（使用 JS 添加 .active 类），以及鼠标悬停在其上（悬停）时，为按钮添加背景颜色 */
.active, .collapsible:hover {
background-color: #ccc;
}
/* 样式化可折叠内容。注意：默认情况下隐藏 */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
步骤 3) 添加 JavaScript
示例
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
自己尝试 »
动画折叠（向下滑动）
要制作动画折叠，请将 max-height: 0、overflow: hidden 和 transition 用于 max-height 属性添加到 panel 类。
然后，使用 JavaScript 通过设置计算后的 max-height 来向下滑动内容，具体取决于面板在不同屏幕尺寸下的高度
示例
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
自己尝试 »
添加图标
在每个按钮中添加一个符号，以指示折叠内容是打开还是关闭
示例
.collapsible:after {
content: '\02795'; /* "加号" (+) 的 Unicode 字符 */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* "减号" (-) 的 Unicode 字符 */
}
自己尝试 »
