可折叠元素是手风琴元素, 可让你在点按时扩展或折叠内容, 可用于提供内容的紧凑表示。它允许隐藏与用户不立即相关的内容。这是一个简单可折叠的语法：
<ul class =" collapsible-header"> <li> <div class =" collapsible-header"> <i class =" material-icons"> filter_drama </ i> First </ div> <div class =" collapsible-body" > <span> lsbin </ span> </ div> </ li> <li> <div class =" collapsible-header"> <i class =" material-icons"> place </ i> Second </ div> <div class =" collapsible-body"> <span> lsbin </ span> </ div> </ li> <li> <div class =" collapsible-header"> <i class =" material-icons">快照</ i>第三</ div> <div class =" collapsible-body"> <span> lsbin </ span> </ div> </ li> </ ul>
以下是物化提供的可折叠类及其用途：
- 可折叠类用于将元素标识为可折叠组件。
- 可折叠标题 类用于将div标记设置为节标题。
- 可折叠体类用于将div标签设置为部分内容。
- 可扩展类允许多个部分同时保持打开状态。这是默认行为。
- 弹出类用于制作弹出部分。
- 手风琴课一次仅允许一个部分保持打开状态。
- 活动班允许在选择之前打开当前部分。
例子：
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet"
href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
< script type = "text/javascript"
src =
"https://code.jquery.com/jquery-2.1.1.min.js" >
</ script >
<!--Let browser know website is optimized for mobile-->
< meta name = "viewport"
content=" width = device -width, initial-scale = 1 .0"/>
< style >
.card-panel{
border: thin solid green;
}
</ style >
</ head >
< body class = "container" >
< h3 >Collapsible in Materialize:</ h3 >
< div class = "card-panel" >
< h4 >Simple Collapsible</ h4 >
< ul class = "collapsible"
data-collapsible = "accordion" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
favorite</ i >
First Option
</ div >
< div class = "collapsible-body" >
< p >lsbin</ p >
</ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history</ i >
Second Option
</ div >
< div class = "collapsible-body" >
< p >lsbin</ p >
</ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
home</ i >Third Option
</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Expandable Collapsible</ h4 >
< ul class = "collapsible"
data-collapsible = "expandable" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >favorite
</ i >First Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
history</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
whatshot</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Pop-out Collapsible</ h4 >
< ul class = "collapsible popout"
data-collapsible = "accordion" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
favorite</ i >First Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history
</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >whatshot
</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Pre-selected Collapsible</ h4 >
< ul class = "collapsible" data-collapsible = "expandable" >
< li >
< div class = "collapsible-header active" >
< i class = "material-icons" >
favorite</ i >First Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history
</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >whatshot
</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >lsbin</ p ></ div >
</ li >
</ ul >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
