1.javascript實現

1.1 html

<div id="box">
    <div id="content">
        <h4>皮質腕錶 水晶刻度大氣錶盤</h4>
        <p>瑞典 | Daniel Wellington | 價格:￥1233.24</p>
        <div id="spread">
            <img src="images/pic.jpg" alt="">
            <p>稅費：進口稅 預計146.76元</
 
p>
            <p>物流：香港倉發貨 至中國海關 至杭州市</p>
            <p>運費：0.00 24：00前付款,預計15日內送達</p>
        </div>
    </div>
    <button id="btn">展開</button>
</div>

1.2 css

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family
 
: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #222222;
    }
    #box{
        width: 600px;
        margin: 20px auto;
        text-align: center;
    }
    #content{
        background-color: #b3dae9;
        border-radius: 8px;
        box-shadow: 1px 1px 1px #ccc;
        border
 
:1px solid #EEEEEE;
    }
    h4{
        font-size: 16px;
    }
    h4,p{
        padding: 10px 0;
    }
    #btn{
        width: 80px;
    }
    #spread{
        height: 0px;
        overflow: hidden;
    }
</style>

1.3 javascript

<script>
    /*獲得btn*/
var btn = document.getElementById('btn')
    var spread = document.getElementById('spread')
    var iSpread = false
/*高度*/
var height = spread.scrollHeight
/*總時間*/
var time = 420;
    /*間隔*/
var interval = 8.4
/*速度*/
var speed = height/(time/interval)
    /*點選事件*/
btn.onclick = function (e) {
        btn.disabled = 'disabled'
if(!iSpread){
            var speeds = 0
var timer = setInterval(function () {
                speeds += speed
                spread.style.height = speeds + 'px'
if(parseInt(spread.style.height) >=height){
                    clearTimeout(timer)
                    btn.disabled = ''
}
            },interval)
            this.innerHTML = '收起'
}else {
            var speeds = height
this.innerHTML = '展開'
var timer = setInterval(function () {
                speeds -= speed
                spread.style.height = speeds + 'px'
if(speeds <= 0){
                    clearTimeout(timer)
                    btn.disabled = ''
}
            },interval)
        }
        iSpread = !iSpread
}

</script>

1.4 效果

2.jQuery實現

2.1 html

<div id="box">
    <div id="content">
        <h4>手機</h4>
        <p>價格:1499 2999 3999 5999 6999</p>
        <div id="spread">
            <p>魅族 note5 小米 華為 OPPO</p>
            <p>超長待機 防水 1080高清屏</p>
        </div>
    </div>
    <button id="btn">展開</button>
</div>

2.2 css

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #222222;
    }
    #box{
        width: 600px;
        margin: 20px auto;
        text-align: center;
    }
    #content{
        background-color: #FF9C01;
    }
    h4,p{
        padding: 10px 0;
    }
    #btn{
        width: 80px;
    }
    #spread{
        display: none;
    }
</style>

2.3 javascript

<script src="jquery-3.2.1.min.js"></script>

<script>
    var btn = $('#btn')
    var spread = $('#spread')
    btn.click(function () {
        spread.slideToggle()
    })
</script>