css 实现展开合并按钮

模板：

<view class="strategyConteng">
<view  @click="stateNum[index].isFlag = !stateNum[index].isFlag">
<view>珠江啤酒0度系列满10赠1
<span class="strategyConteng_open":class="stateNum[index].isFlag?'strategyConteng_close':''"></span>
</view>
<view v-show="stateNum[index].isFlag">
<p>产品信息：</p>
    <p>怡纯350ml，1×24</p>
    <p>怡纯550ml，1×24</p>
<p>赠品信息：</p>
<p>怡纯350ml，1×24</p>
</view>
</view>
</view>

css样式：

.strategyConteng {
margin: 0 36rpx;
border-top: 1rpx dashed #ccc;
font-weight: 400;
font-size: 22rpx;
color: #4A4D57;

&_open {
position: relative;
width: 22rpx;
height: 22rpx;

&::before {
content: '';
width: 8rpx;
height: 8rpx;
border-right: 1rpx solid #4A4D57;
border-top: 1rpx solid #4A4D57;
transform: rotate(45deg);
position: absolute;
right: -30rpx;
transition: 0.5s;
top: 10rpx;
}
}
&_close {
position: relative;

&::before {
content: '';
width: 8rpx;
height: 8rpx;
border-right: 1rpx solid #4A4D57;
border-top: 1rpx solid #4A4D57;
transform: rotate(135deg);
transition: 0.5s;
position: absolute;
right: -30rpx;
top: 10rpx;
}
}
}

效果：

原文地址：https://blog.csdn.net/qq_43787947/article/details/143684619

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！