JavaScript點選div塊展開和收縮效果詳解

admin發表於2017-10-23
JavaScript

本章節分享一段程式碼例項，它實現了點選同一個按鈕能夠控制div塊的展開和收縮功能。

此種效果在實際應用中比較常見，下面就給出程式碼，並詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{ 
  margin:0; 
  padding:0;
}
body{
  text-align:center;
  font:75% Verdana, Arial, Helvetica, sans-serif;
}
h1{
  font:125% Arial, Helvetica, sans-serif;
  text-align:left; 
  font-weight:bolder;
  background:#333; 
  padding:3px;
  display:block; 
  color:#99CC00
}
.class1{
  width:40%; 
  background:#CCC;
  position:relative; 
  margin:0 auto;
  padding:5px;
}
span{
  position:absolute; 
  right:10px;
  top:8px; 
  cursor:pointer; 
  color:yellow;
}
p{ 
  text-align:left; 
  line-height:20px;
  background:#333; 
  padding:3px; 
  margin-top:5px;
  color:#99CC00
}
#class1content{
  height:300px;
  overflow:hidden
}
</style>
<script>
function $(element){
  return element = document.getElementById(element);
}
function $D(){
  var d=$('class1content');
  var h=d.offsetHeight;
  var maxh=300;
  function dmove(){
    h+=50; //設定層展開的速度
    if(h>=maxh){
      d.style.height='300px';
      clearInterval(iIntervalId);
    }
        else{
      d.style.display='block';
      d.style.height=h+'px';
    }
  }
  iIntervalId=setInterval(dmove,2);
}
function $D2(){
  var d=$('class1content');
  var h=d.offsetHeight;
  var maxh=300;
  function dmove(){
    h-=50;//設定層收縮的速度
    if(h<=0){
      d.style.display='none';
      clearInterval(iIntervalId);
    }
        else{
      d.style.height=h+'px';
    }
  }
  iIntervalId=setInterval(dmove,2);
}
function $use(){
  var d=$('class1content');
  var sb=$('stateBut');
  if(d.style.display=='none'){
    $D();
    sb.innerHTML='收縮';
  }
  else{
    $D2();
    sb.innerHTML='展開';
  }
}
window.onload=function(){
  var ele=$("stateBut");
  ele.onclick=function(){$use()}
}
</script>
</head>
<body>
<div class="class1">
  <h1>DIV層的展開隱藏效果</h1>
  <span id="stateBut">展開</span>
  <p id="class1content"></p>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function $(element){

  return element = document.getElementById(element);

}，此方法模擬實現了jQuery中的id選擇器。

（2）.function $D(){

  var d=$('class1content');

  var h=d.offsetHeight;

  var maxh=300;

  function dmove(){

    h+=50; //設定層展開的速度

    if(h>=maxh){

      d.style.height='300px';

      clearInterval(iIntervalId);

    }

    else{

      d.style.display='block';

      d.style.height=h+'px';

    }

  }

  iIntervalId=setInterval(dmove,2);

}實現了div塊展開的效果。之所以會以動畫方式緩慢展開，是因為採用定時器函式的方式，實現動態設定元素高度的功能。

（3）.function $D2(){

  var d=$('class1content');

  var h=d.offsetHeight;

  var maxh=300;

  function dmove(){

    h-=50;//設定層收縮的速度

    if(h<=0){

      d.style.display='none';

      clearInterval(iIntervalId);

    }

    else{

      d.style.height=h+'px';

    }

  }

  iIntervalId=setInterval(dmove,2);

}這個實現收縮功能，原理和展開是一樣的，只是相反的作用而已。

（4）.function $use(){

  var d=$('class1content');

  var sb=$('stateBut');

  if(d.style.display=='none'){

    $D();

    sb.innerHTML='收縮';

  }

  else{

    $D2();

    sb.innerHTML='展開';

  }

},根據div塊隱藏或者顯示的狀態，來對點選按鈕的文字進行一些設定和呼叫相應的函式實現展開或者收縮。

二.相關閱讀:

（1）.offsetHeight參閱offsetHeight一章節。

（2）.clearInterval()方法參閱window.clearInterval()一章節。

（3）.setInterval()方法參閱window.setInterval()一章節。

（4）.innerHTML屬性參閱JavaScript innerHTML一章節。

相關文章