如何创建 - 折叠
了解如何创建可折叠部分。
可折叠
单击按钮可在显示和隐藏可折叠内容之间切换。
Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. 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">Open 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 和 < 将 max-height 属性的 code class="w3-codespan">transition 转换为 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';
/* "plus" 符号 (+) 的 Unicode 字符 */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* "minus" 符号 (-) 的 Unicode 字符 */
}
亲自试一试 »
