【HTML】- 實現展開與收起效果

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>