信息框的展示和隐藏（小三角方向的转换）

 

  

<div>
                            <span>
                            <summary id="show" @click="showText">
                                <h3>免费配送和退换货</h3>
                                <div v-bind:class="{aa:flag==false,aa1:flag!==false}"></div>
                            </summary>
                            <div id="hide" v-show="flag">
                                <p>部分城市提供当日达、次日达服务。<br>Nike会员或单笔订单满399普通达免运费。</p><br>
                                <a href="#">退换货政策例外情况</a>。
                            </div>
                        </span>
                        <span>
                            <summary id="show2" @click="showText2">
                                <h3>更多信息</h3>
                                <div v-bind:class="{aa:flag3==false,aa1:flag3!==false}"></div>
                            </summary>
                            <div id="hide" v-show="flag3">
                                <ul>特别版产品销售规则
                                    <li>• 此商品每人限购1件，且不适用于任何优惠券/礼品卡等折扣活动。</li>
                                    <li>• 此商品仅支持网上在线支付，且需在商品订单提交后30分钟内成功付款。超时订单将被取消。成功付款以本网站确认付款信息为准，您可以通过查询订单状态实时了解是否已成功付款。</li>
                                    <li>• 网上在线成功支付需要多方协同，例如您的付款银行、支付及交易平台以及网络接入服务提供商等。自您进行支付后，各方系统需要一定时间进行数据交换直至本网站确认付款成功。</li>
                                    <li>• 在此期间，一旦发生网络传输延迟或数据交换堵塞可能会影响您成功付款，因此建议您在订单提交后尽快进行付款，以避免因网络延迟未能成功付款而导致订单取消的情形出现。</li>
                                </ul>
                            </div>
                        </span>
                    </div>

showText(){             //显示与隐藏
   this.flag = !this.flag;
},
showText2(){             //显示与隐藏
    this.flag3 = !this.flag3;
},

/* 点击可显示隐藏部分 */
#text div span summary{
    position: relative;
    padding: 28px 0px;
    background: transparent;
    width: 100%;
    list-style: none;
    cursor: pointer;
    display: list-item;
}
#text div span summary h3{
    color: #111;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
}
#text div span li{
    list-style: none;
    margin-top: 15px;
    
}

/* 两个小三角形 */
.aa{
    position: absolute;
    right: 6px;
    top: calc(50% - 6px);
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}
.aa1{
    position: absolute;
    right: 6px;
    top: calc(50% - 6px);
    border: solid black;
    border-width: 3px 0 0 3px;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}