Materialize - 可折叠

Materialise 提供了各种 CSS 类来应用各种预定义的视觉和Behave增强功能来显示各种类型的手风琴。下表提到了可用的类别及其效果。

先生。 类名和描述
1

可折叠的

将元素标识为物化可折叠组件。ul 元素必需。
2

可折叠标题

将 div 设置为节标题。
3

可折叠车身

将 div 设置为节内容容器。
4

弹出

创建一个可折叠的弹出窗口。
5

积极的

打开一个部分。
6

可扩展的

将可折叠组件标记为可展开。
7

手风琴

将可折叠组件标记为折叠组件。

以下是以不同方式使用手风琴的示例。

例子

现场演示 
<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>

输出

验证输出。

实现可折叠 实现可折叠