1. 程式人生 > >layui面板總結

layui面板總結

                                                      layui面板總結

面板盒子類名:layui-collapse 選項卡類名:layui-colla-item

選項說明:layui-colla-title  選項內容:layui-colla-content

在摺疊面板的父容器設定屬性 lay-accordion 來開啟手風琴,那麼在進行摺疊操作時,始終只會展現當前的面板。

<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 layui-show">內容區域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">魯迅</h2>
    <div class="layui-colla-content layui-show">內容區域</div>
  </div>
</div>
 
<script>
//注意:摺疊面板 依賴 element 模組,否則無法進行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>