扩大崩溃的div

Question

我有3个div。我即将发布的代码很棒，所有3个div都按照我的要求进行扩展和折叠。现在是困难的部分。如果单击div 2或3，我需要折叠div 1或者如果单击div 1或3则折叠div 2 ...等等。

我以为我可以使用

document.getElementById('tab name').style.height = '0px';

要重置打开的标签的高度，然后将x（标签＃）重置为0 在尝试了这个解决方案之后，我花了一个小时试图调试但是碰壁了。

先谢谢你帮我保存了我留下的头发：）

这是我代码的最终版本。我已经能够回答我自己的问题+1 :) 但我想我会和大家分享

var Hide = "";
var varHt = 0;
var varHt1 = 0;
var varHt2 = 0;
var varHt3 = 0;
var Ht = "";
var Ht1 = "";
var Ht2 = "";
var Ht3 = "";
var x = 0;
var x1 = 0;
var x2 = 0;
var x3 = 0;
var y = 10;
var z = 4;
var foo = new Array();
var Speed = "";
function setup() {
foo = document.getElementsByTagName("div");
for (i=0;i<foo.length;i++) {
if (foo[i].className == "hidden") {
Hide = foo[i].id;
}
}
Ht = document.getElementById(Hide).offsetHeight;
Ht1 = document.getElementById('tab1-7').offsetHeight;
Ht2 = document.getElementById('tab2-7').offsetHeight;
Ht3 = document.getElementById('tab3-7').offsetHeight;
Speed = Hide.substring(Hide.lastIndexOf('-')+1);
document.getElementById(Hide).style.height = '0px';
document.getElementById('tab1-7').style.height = '0px';
document.getElementById('tab2-7').style.height = '0px';
document.getElementById('tab3-7').style.height = '0px';
document.getElementById('tab1').style.display = 'inline';
document.getElementById('tab2').style.display = 'inline';
document.getElementById('tab3').style.display = 'inline';
if (Speed == 1) { y = 100; z = 1; }
if (Speed == 2) { y = 70; z = 1; }
if (Speed == 3) { y = 40; z = 1; }
if (Speed == 4) { y = 20; z = 1; }
if (Speed == 5) { y = 10; z = 1; }
if (Speed == 6) { y = 10; z = 2; }
if (Speed == 7) { y = 10; z = 4; }
if (Speed == 8) { y = 10; z = 7; }
if (Speed == 9) { y = 10; z = 10; }
}
function toggle2() {
if (x2 === 0) {
document.getElementById('tab2-7').style.height = varHt2+'px';
if (((Ht2-varHt2) < z) && (varHt2 !== Ht2)) {
varHt2 = Ht2;
} else {
varHt2 = varHt2+z;
}
if (varHt2 <= Ht2) {
setTimeout('toggle2()',y);
}
if (varHt2 > Ht2) {
varHt2 = Ht2;
x2 = 1;
document.getElementById('tab3-7').style.height = varHt3+'px';
varHt3 = varHt3-z;
if ((Ht3-varHt3) <= Ht3) {
setTimeout('toggle3()',y);
}
if ((Ht3-varHt3) > Ht3) {
varHt3 = 0;
document.getElementById('tab3-7').style.height = varHt3+'px';
x3 = 0;
}
document.getElementById('tab1-7').style.height = varHt1+'px';
varHt1 = varHt1-z;
if ((Ht1-varHt1) <= Ht1) {
setTimeout('toggle1()',y);
}
if ((Ht1-varHt1) > Ht1) {
varHt1 = 0;
document.getElementById('tab1-7').style.height = varHt1+'px';
x1 = 0;
}
}
} else {
document.getElementById('tab2-7').style.height = varHt2+'px';
varHt2 = varHt2-z;
if ((Ht2-varHt2) <= Ht2) {
setTimeout('toggle2()',y);
}
if ((Ht2-varHt2) > Ht2) {
varHt2 = 0;
document.getElementById('tab2-7').style.height = varHt2+'px';
x2 = 0;
}
}
}
function toggle1() {
if (x1 === 0) {
document.getElementById('tab1-7').style.height = varHt1+'px';
if (((Ht1-varHt1) < z) && (varHt1 !== Ht1)) {
varHt1 = Ht1;
} else {
varHt1 = varHt1+z;
}
if (varHt1 <= Ht1) {
setTimeout('toggle1()',y);
}
if (varHt1 > Ht1) {
varHt1 = Ht1;
x1 = 1;
document.getElementById('tab3-7').style.height = varHt3+'px';
varHt3 = varHt3-z;
if ((Ht3-varHt3) <= Ht3) {
setTimeout('toggle3()',y);
}
if ((Ht3-varHt3) > Ht3) {
varHt3 = 0;
document.getElementById('tab3-7').style.height = varHt3+'px';
x3 = 0;
}
document.getElementById('tab2-7').style.height = varHt2+'px';
varHt2 = varHt2-z;
if ((Ht2-varHt2) <= Ht2) {
setTimeout('toggle2()',y);
}
if ((Ht2-varHt2) > Ht2) {
varHt2 = 0;
document.getElementById('tab2-7').style.height = varHt2+'px';
x2 = 0;
}
}
} else {
document.getElementById('tab1-7').style.height = varHt1+'px';
varHt1 = varHt1-z;
if ((Ht1-varHt1) <= Ht1) {
setTimeout('toggle1()',y);
}
if ((Ht1-varHt1) > Ht1) {
varHt1 = 0;
document.getElementById('tab1-7').style.height = varHt1+'px';
x1 = 0;
}
}
}
function toggle3() {
if (x3 === 0) {
document.getElementById('tab3-7').style.height = varHt3+'px';
if (((Ht3-varHt3) < z) && (varHt3 !== Ht3)) {
varHt3 = Ht3;
} else {
varHt3 = varHt3+z;
}
if (varHt3 <= Ht3) {
setTimeout('toggle3()',y);
}
if (varHt3 > Ht3) {
varHt3 = Ht3;
x3 = 1;
document.getElementById('tab1-7').style.height = varHt1+'px';
varHt1 = varHt1-z;
if ((Ht1-varHt1) <= Ht1) {
setTimeout('toggle1()',y);
}
if ((Ht1-varHt1) > Ht1) {
varHt1 = 0;
document.getElementById('tab1-7').style.height = varHt1+'px';
x1 = 0;
}
document.getElementById('tab2-7').style.height = varHt2+'px';
varHt2 = varHt2-z;
if ((Ht2-varHt2) <= Ht2) {
setTimeout('toggle2()',y);
}
if ((Ht2-varHt2) > Ht2) {
varHt2 = 0;
document.getElementById('tab2-7').style.height = varHt2+'px';
x2 = 0;
}
}
} else {
document.getElementById('tab3-7').style.height = varHt3+'px';
varHt3 = varHt3-z;
if ((Ht3-varHt3) <= Ht3) {
setTimeout('toggle3()',y);
}
if ((Ht3-varHt3) > Ht3) {
varHt3 = 0;
document.getElementById('tab3-7').style.height = varHt3+'px';
x3 = 0;
}
}
}

下面的代码是没有我的失败史诗修复

的工作vr

var varHt1 = 0;
var varHt2 = 0;
var varHt3 = 0;
var Ht1 = "";
var Ht2 = "";
var Ht3 = "";
var x1 = 0;
var x2 = 0;
var x3 = 0;
var y = 10;
var z = 4;
var Speed = "";
}
Ht1 = document.getElementById('tab1-7').offsetHeight;
Ht2 = document.getElementById('tab2-7').offsetHeight;
Ht3 = document.getElementById('tab3-7').offsetHeight;
document.getElementById('tab1-7').style.height = '0px';
document.getElementById('tab2-7').style.height = '0px';
document.getElementById('tab3-7').style.height = '0px';
document.getElementById('tab1').style.display = 'inline';
document.getElementById('tab2').style.display = 'inline';
document.getElementById('tab3').style.display = 'inline';
if (Speed == 1) { y = 100; z = 1; }
if (Speed == 2) { y = 70; z = 1; }
if (Speed == 3) { y = 40; z = 1; }
if (Speed == 4) { y = 20; z = 1; }
if (Speed == 5) { y = 10; z = 1; }
if (Speed == 6) { y = 10; z = 2; }
if (Speed == 7) { y = 10; z = 4; }
if (Speed == 8) { y = 10; z = 7; }
if (Speed == 9) { y = 10; z = 10; }
}
function toggle2() {
if (x2 === 0) {
document.getElementById('tab2-7').style.height = varHt2+'px';
if (((Ht2-varHt2) < z) && (varHt2 !== Ht2)) {
varHt2 = Ht2;
} else {
varHt2 = varHt2+z;
}
if (varHt2 <= Ht2) {
setTimeout('toggle2()',y);
}
if (varHt2 > Ht2) {
varHt2 = Ht2;
x2 = 1;
}
} else {
document.getElementById('tab2-7').style.height = varHt2+'px';
varHt2 = varHt2-z;
if ((Ht2-varHt2) <= Ht2) {
setTimeout('toggle2()',y);
}
if ((Ht2-varHt2) > Ht2) {
varHt2 = 0;
document.getElementById('tab2-7').style.height = varHt2+'px';
x2 = 0;
}
}
}
function toggle1() {
if (x1 === 0) {
document.getElementById('tab1-7').style.height = varHt1+'px';
if (((Ht1-varHt1) < z) && (varHt1 !== Ht1)) {
varHt1 = Ht1;
} else {
varHt1 = varHt1+z;
}
if (varHt1 <= Ht1) {
setTimeout('toggle1()',y);
}
if (varHt1 > Ht1) {
varHt1 = Ht1;
x1 = 1;
}
} else {
document.getElementById('tab1-7').style.height = varHt1+'px';
varHt1 = varHt1-z;
if ((Ht1-varHt1) <= Ht1) {
setTimeout('toggle1()',y);
}
if ((Ht1-varHt1) > Ht1) {
varHt1 = 0;
document.getElementById('tab1-7').style.height = varHt1+'px';
x1 = 0;
}
}
}
function toggle3() {
if (x3 === 0) {
document.getElementById('tab3-7').style.height = varHt3+'px';
if (((Ht3-varHt3) < z) && (varHt3 !== Ht3)) {
varHt3 = Ht3;
} else {
varHt3 = varHt3+z;
}
if (varHt3 <= Ht3) {
setTimeout('toggle3()',y);
}
if (varHt3 > Ht3) {
varHt3 = Ht3;
x3 = 1;
}
} else {
document.getElementById('tab3-7').style.height = varHt3+'px';
varHt3 = varHt3-z;
if ((Ht3-varHt3) <= Ht3) {
setTimeout('toggle3()',y);
}
if ((Ht3-varHt3) > Ht3) {
varHt3 = 0;
document.getElementById('tab3-7').style.height = varHt3+'px';
x3 = 0;
}
}
}