结合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>










网友评论