【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>