layui的基本元素之一-----面板

卡片面板

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>卡片面板</legend>
</fieldset>   
 <!-- 
  卡片式面板面板通常用于非白色背景色的主体内           从而映衬出边框投影 
   -->
<div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">卡片面板1</div>
        <div class="layui-card-body">
         	主体内容1
        </div>
      </div>
    </div>
    <!-- 
     	结合 layui 的栅格系统        轻松实现响应式布局
     -->
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">卡片面板2</div>
        <div class="layui-card-body">
         主体内容2
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">卡片面板3</div>
        <div class="layui-card-body">
          主体内容3
        </div>
      </div>
    </div>
  </div>
</div> 

效果：

折叠面板

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规折叠面板</legend>
</fieldset>
<div class="layui-collapse" lay-filter="test">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题1？</h2>
    <div class="layui-colla-content">
      <p>答案1</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题2</h2>
    <div class="layui-colla-content">
      <p>答案2</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题3</h2>
    <div class="layui-colla-content">
      <p>答案3</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题4？</h2>
    <div class="layui-colla-content">
      <p>答案4</p>
    </div>
  </div>
</div>
  

效果：

手风琴面板

父容器设置属性 lay-accordion 来开启手风琴，始终只会展现当前的面板。

layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>手风琴折叠</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题1</h2>
    <div class="layui-colla-content layui-show">
 	<p>答案1</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题2</h2>
    <div class="layui-colla-content">
      <p>答案2</p></div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题3</h2>
    <div class="layui-colla-content">
      <p>答案3</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">问题4</h2>
    <div class="layui-colla-content">
      <p>答案4</p>
    </div>
  </div>
</div>

效果：

面板嵌套

支持无限嵌套，应用场景非常多

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>面板嵌套</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">文豪</h2>
    <div class="layui-colla-content layui-show">
    
      <div class="layui-collapse" lay-accordion="">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">唐代</h2>
          <div class="layui-colla-content layui-show">
            
            <div class="layui-collapse" lay-accordion="">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">杜甫</h2>
                <div class="layui-colla-content layui-show">
                  伟大的诗人
                </div>
              </div>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">李白</h2>
                <div class="layui-colla-content">
                  <p>据说是韩国人</p>
                </div>
              </div>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">王勃</h2>
                <div class="layui-colla-content">
                  <p>千古绝唱《滕王阁序》</p>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">宋代</h2>
          <div class="layui-colla-content">
            <p>比如苏轼、李清照</p>
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">当代</h2>
          <div class="layui-colla-content">
            <p>比如贤心</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">科学家</h2>
    <div class="layui-colla-content">
      <p>伟大的科学家</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">艺术家</h2>
    <div class="layui-colla-content">
      <p>浑身散发着艺术细胞</p>
    </div>
  </div>
</div>
 

效果：

导入js文件后，编写JavaScript代码

<script>
layui.use(['element', 'layer'], function(){
  var element = layui.element;
  var layer = layui.layer;
  
  //监听折叠
  element.on('collapse(test)', function(data){
    layer.msg('展开状态：'+ data.show);
  });
});
</script>