Materialise CSS可折叠

【Materialise CSS可折叠】可折叠或手风琴用于获取各种预定义的视觉效果和行为增强, 以显示各种类型的手风琴。 Materialize CSS提供了不同的CSS类来应用这些可折叠的类。

Index	班级名称	Description
	collapsible	它用于将元素标识为可物化可折叠组件。 ul元素必需。
	collapsible-header	用于将div设置为节标题。
	collapsible-body	用于将div设置为部分内容容器。
	popout	它用于创建可折叠的弹出窗口。
	active	用于打开一个部分。
	expandable	它用于将可折叠组件标记为可扩展。
	accordion	它用于将可折叠组件标记为手风琴。

例子让我们以一个示例来演示在Materialize CSS中可折叠：

< html> < head> < title> The Materialize Collapsible Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h4> Simple Accordion< /h4> < ul class = "collapsible" data-collapsible = "accordion"> < li> < div class = "collapsible-header"> < i class = "material-icons"> filter_drama< /i> First Section< /div> < div class = "collapsible-body"> < p> This is first section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> place< /i> Second Section< /div> < div class = "collapsible-body"> < p> This is second section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> whatshot< /i> Third Section< /div> < div class = "collapsible-body"> < p> This is third section.< /p> < /div> < /li> < /ul> < h4> Popout Accordion< /h4> < ul class = "collapsible popout" data-collapsible = "accordion"> < li> < div class = "collapsible-header"> < i class = "material-icons"> filter_drama< /i> First Section< /div> < div class = "collapsible-body"> < p> This is first section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> place< /i> Second Section< /div> < div class = "collapsible-body"> < p> This is second section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> whatshot< /i> Third Section< /div> < div class = "collapsible-body"> < p> This is third section.< /p> < /div> < /li> < /ul> < h4> Accordion with Preselected Section< /h4> < ul class = "collapsible" data-collapsible = "accordion"> < li> < div class = "collapsible-header"> < i class = "material-icons"> filter_drama< /i> First Section< /div> < div class = "collapsible-body"> < p> This is first section.< /p> < /div> < /li> < li> < div class = "collapsible-header active"> < i class = "material-icons"> place< /i> Second Section< /div> < div class = "collapsible-body"> < p> This is second section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> whatshot< /i> Third Section< /div> < div class = "collapsible-body"> < p> This is third section.< /p> < /div> < /li> < /ul> < h4> Expandables< /h4> < ul class = "collapsible" data-collapsible = "expandable"> < li> < div class = "collapsible-header"> < i class = "material-icons"> filter_drama< /i> First Section< /div> < div class = "collapsible-body"> < p> This is first section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> place< /i> Second Section< /div> < div class = "collapsible-body"> < p> This is second section.< /p> < /div> < /li> < li> < div class = "collapsible-header"> < i class = "material-icons"> whatshot< /i> Third Section< /div> < div class = "collapsible-body"> < p> This is third section.< /p> < /div> < /li> < /ul> < /body> < /html>

立即测试
输出