layui 按钮下拉

结合layui的折叠面板和按钮
效果图如下

qqq111.png

点击展开

qqqqq21.png qqq22.png

代码demo
再给按钮点击事件，获取data-status执行对应操作
可以再调 上下间距样式

 <div class="layui-collapse layui-btn">
      <div class="layui-colla-item">
        <h2 class="layui-colla-title layui-btn-bg" style="background-color: #009688">导出订单</h2>
        <div class="layui-colla-content">
            <span class="layui-btn" data-status='1'>已付款订单</span>
            <span class="layui-btn" data-status='0'>未付款订单</span>
        </div>
        <div class="layui-colla-content">
            <span class="layui-btn" data-status='-1'>已退款订单</span>
            <span class="layui-btn" data-status='0'>已取消订单</span>
        </div>
        <div class="layui-colla-content">
            <span class="layui-btn" data-status='time'>选择时间段</span>
            <span class="layui-btn layui-btn-normal" data-status='all'>全 部 订 单</span>
        </div>
      </div>
    </div>