关于用javascript做块的手风琴效果

原创
2013/06/17 17:09
阅读数 322
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #main{margin-left:auto;margin-right:auto;width:640px;margin-top:100px;}
        #main h3{
            height: 35px;
            background-color: #ff99cc;
            border-style:solid;
            border-width:1px;
            cursor:pointer;
        }
        #fcontent{
            height: 200px;
            background-color: #cccccc;
        }
        #scontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #acontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #bcontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #ccontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #dcontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
    </style>


</head>
<body>
<div id="main">
    <h3 onclick="displaycontent(0)"  >title</h3>
    <div id="fcontent">1</div>
    <h3 onclick="displaycontent(1)"  >title</h3>
    <div id="scontent">678content...</div>
    <h3 onclick="displaycontent(2)"  >title</h3>
    <div id="acontent">123content...</div>
    <h3 onclick="displaycontent(3)"  >title</h3>
    <div id="bcontent">678content...</div>
    <h3 onclick="displaycontent(4)"  >title</h3>
    <div id="ccontent">123content...</div>
    <h3 onclick="displaycontent(5)"  >title</h3>
    <div id="dcontent">678content...</div>
</div>
  <script type="text/javascript">

     // 获得 所有 div  id 将其赋值给 一个变量
      var tempobj = document.getElementById("fcontent");
      var tempobjs = document.getElementById("scontent");
      var tempobja = document.getElementById("acontent");
      var tempobjb = document.getElementById("bcontent");
      var tempobjc = document.getElementById("ccontent");

      var tempobjd = document.getElementById("dcontent");

     //将获得的所有div的这些变量全部按顺序放到一个数组里 

       var divobjarray = [tempobj,tempobjs,tempobja,tempobjb,tempobjc,tempobjd];

      //  选择 所有div中的两个变量,通过这两个变量给div高度赋值,高度不为零的为默认打开的,高度为零的可顺便在其他div中选一个进行赋值。
     tempobj.style.height = "200px";
     tempobjs.style.height = "0px";
      //  将这上面讲的已赋值的两个变量按顺序放到一个只有两个元素的数组中,默认打开的其数组下标为0,另一个数组下标为1;
      var divobjoffandon =new Array();
          divobjoffandon[0]=tempobj;
          divobjoffandon[1] =tempobjs;
       //  设置  打开线程 和关闭线程的  变量id
      var intererids;
      var interverid;
     //  控制  div  打开或者是关闭 方法

      function acctiondisplay(tit){

//对下标为0的数组元素执行展开的炒作,对下标为1的数组进行关闭的操作

          var temp_height_on = parseInt(divobjoffandon[0].style.height);
          var temp_height_off = parseInt(divobjoffandon[1].style.height);
          divobjoffandon[0].style.display="block";
          divobjoffandon[0].style.height=temp_height_on+2+"px";//高度增加
          divobjoffandon[1].style.height=temp_height_off-2+"px";  //高度减少     
              if((temp_height_on >=200) ||(temp_height_off<=0) ){//当达到指定高度时 执行结束操作
                  divobjoffandon[0].style.height = "200px";
                  divobjoffandon[1].style.height = "0px";
                  divobjoffandon[1].style.display="none";
                  clearInterval(interverid);
              }
      }


       function displaycontent(tit){
           //  设置  打开或者是关闭状态的  数组
           // 判断当前的div数组变量是不是已经打开的div的数组变量 ,若是打开的就不打开了,下边函数将不执行。            

           if(divobjarray[tit]==divobjoffandon[0]){return;}  

    //若不是已打开的div数组变量,将已打开的div数组下标为0数组变量赋值给数组下标为1的数组变量,将从div块中传过来的参数所对应的数组中相应下标的变量赋值给只有2个元素的数组0下表为止,然后调用函数对 0下标相对应的的块的高度进行增加,1下标位置相对应的块的高度进行减少。         

           if(divobjarray[tit]!=divobjoffandon[0]){
           divobjoffandon[1] = divobjoffandon[0];
           divobjoffandon[0] = divobjarray[tit];
           interverid =  setInterval("acctiondisplay()",4);}
       }


     var div_obj_array_len = divobjarray.length;
     //  初始化 手风琴  目的:设置  overflow  同时将 其他的内容高度设置为0
      function acctioninit(){
          // 设置 每个div  的  sytle overflow :hidden
          for(var i=0;i<div_obj_array_len;i++){
              divobjarray[i].style.overflow="hidden";
              if(i!=0){
                  //  第一个div  的高度默认应该是 200  而其他的是 0
                  divobjarray[i].style.height="0";
              }
          }
      }
     // 调用初始化方法
     acctioninit();
  </script>


</body>

</html>


本程序有一个问题就是 偶尔会出现目的块打开时而 ,某一个块却未完全关闭。这个要多注意!!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部