Layui表格头部表单筛选条件过多时的折叠与开展成果实现

-折叠状态效果图：

-开展状态效果图：

具体实现代码：

  <div class="layui-col-md12">    <div class="layui-card">      <div class="layui-card-header">查问发送记录</div>      <div class="layui-card-body">        <form class="layui-form" action="" id="search_form">          <div class="layui-form-item">            <div class="layui-fluid">              <div class="layui-row">                <div class="layui-col-xs3">                  <div class="layui-inline">                    <label class="layui-form-label">开始工夫</label>                    <div class="layui-input-inline">                      <input type="text" name="sdate" class="layui-input" id="sdate" placeholder="请抉择开始工夫">                    </div>                  </div>                </div>                <div class="layui-col-xs3">                  <div class="layui-inline">                    <label class="layui-form-label">完结工夫</label>                    <div class="layui-input-inline">                      <input type="text" name="edate" class="layui-input" id="edate" placeholder="请抉择完结工夫">                    </div>                  </div>                </div>                <div class="layui-col-xs3">                  <div class="layui-inline">                    <label class="layui-form-label">短信内容</label>                    <div class="layui-input-inline">                      <input type="text" name="content" class="layui-input" id="content" placeholder="请输出短信内容">                    </div>                  </div>                </div>                <div class="more-container">                  <div class="layui-col-xs3">                    <div class="layui-inline">                      <label class="layui-form-label">手机号码</label>                      <div class="layui-input-inline">                        <input type="text" name="mobile" class="layui-input" id="mobile" placeholder="请输出手机号码">                      </div>                    </div>                  </div>                  <div class="layui-col-xs3">                    <div class="layui-inline">                      <label class="layui-form-label">提交人</label>                      <div class="layui-input-inline">                        <input type="text" name="user" class="layui-input" id="user" placeholder="请输出提交人">                      </div>                    </div>                  </div>                </div>                <div class="layui-col-xs3">                  <div class="layui-inline">                    <div class="layui-input-inline">                      <button class="layui-btn" lay-submit lay-filter="fsjl"><i class="layui-icon layui-icon-search"></i>查问</button>                      <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>                      <button class="layui-btn layui-btn-normal more-btn" lay-filter="more"><i class="layui-icon layui-icon-addition"></i>开展</button>                    </div>                  </div>                </div>              </div>            </div>          </div>        </form>      </div>    </div>  </div>

<script>      $(".more-btn").click(function () {        if ($(".more-container").is(":hidden")) {          $(".more-container").show(); //如果元素为暗藏,则将它浮现          $(".more-btn").html('<i class="layui-icon layui-icon-subtraction"></i>收起')        } else {          $(".more-container").hide(); //如果元素为浮现,则将其暗藏          $(".more-btn").html('<i class="layui-icon layui-icon-addition"></i>开展')        }        return false;      })</script>

<style>    .layui-form-label {      padding: 9px 0px;      text-align: center;    }        .layui-form-item .layui-inline {      margin-bottom: 14px;    }        .layui-form-item .layui-input-inline {      width: auto !important;    }    .layui-btn{      padding:0 10px;    }    .more-container {      display: none;    }</style>