關於用javascript作塊的手風琴效果

時間 2019-11-12

原文原文鏈接

<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"); javascript

//將得到的全部div的這些變量所有按順序放到一個數組裏 css

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

// 選擇全部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){ java

//對下標爲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> htm

本程序有一個問題就是偶爾會出現目的塊打開時而，某一個塊卻未徹底關閉。這個要多注意！！ ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。