Javascript导致div在两个类之间交替出现

我有一个函数，通过使用JS设置类名来移动方框。问题是，不知何故，在正确的时间设置了正确的类，但是div在原始类和新类之间交替…每秒钟一次。我将尝试在这里发布小提琴链接。页面上有四个框，单击其中一个成功地将其他三个框向左转换，然后展开所选框。这部分很好用。问题是当我单击一个左框时，四个选项中的一个已展开。扩展后的类开始转换到新类，然后开始返回到扩展后的位置。。。然后永远来回。我尝试过清除div中的所有类，然后进行翻译。我相信JS有一个设计规则我没有？我尝试过的任何东西都不能改变阶级斗争

HTML:

<section id="content">
    <div id="firstBox" class="firstBox" onclick="firstBoxController()">
        2000-2005
    </div>
    <div id="secondBox" class="secondBox" onclick="secondBoxController()">
        2005-2010
    </div>
    <div id="thirdBox" class="thirdBox" onclick="thirdBoxController()">
        2010-2015
    </div>
    <div id="fourthBox" class="fourthBox" onclick="fourthBoxController()">
        2015-2020
    </div>
    <div id="firstSub"  class="hidden"></div>
    <div id="secondSub" class="hidden"></div>
    <div id="thirdSub"  class="hidden"></div>
    <div id="fourthSub" class="hidden"></div>
</section>

//var declarations
var first     = document.getElementById("firstBox");
var firstSub  = document.getElementById("firstSub");
var second    = document.getElementById("secondBox");
var secondSub = document.getElementById("secondSub");
var third     = document.getElementById("thirdBox");
var thirdSub  = document.getElementById("thirdSub");
var fourth    = document.getElementById("fourthBox");
var fourthSub = document.getElementById("fourthSub");

//movement functions
function firstLeft() {
    first.className = "firstLeft";
}

function firstExpand() {
    first.className = "expand";
    firstSub.className = "translateRight";
}

function secondLeft() {
    second.className = "secondLeft";
}

function secondExpand() {
    second.className = "expand";
    secondSub.className = "translateRight";
}


function thirdLeft() {
    third.className = "thirdLeft";
}

function thirdExpand() {
    third.className = "expand";
    thirdSub.className = "translateRight";
}


function fourthLeft() {
    fourth.className = "fourthLeft";
}

function fourthExpand() {
    fourth.className = "expand";
    fourthSub.className = "translateRight";
}

//controller functions

function firstBoxController() {

    if (first.classList.contains("firstBox")) {
        secondLeft();
        thirdLeft();
        fourthLeft();
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(firstExpand, 1000);
}

function secondBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("secondBox")) {
        firstLeft();
        thirdLeft();
        fourthLeft();
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(secondExpand, 1000);
}

function thirdBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("thirdBox")) {
        firstLeft();
        secondLeft();
        fourthLeft();
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(thirdExpand, 1000);
}

function fourthBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("fourthBox")) {
        firstLeft();
        secondLeft();
        thirdLeft();
    }

    window.setInterval(fourthExpand, 1000);
}

.firstBox, .secondBox, 
.thirdBox, .fourthBox {

    width:70%;
    left:12.5%;

}

.firstBox, .secondBox, .thirdBox, 
.fourthBox, .firstSub, .secondSub, 
.thirdSub, .fourthSub, .translateRight, 
.firstLeft, .secondLeft,
.thirdLeft, .expand,
.fourthLeft, .hidden, 
.firstCenter, .secondCenter,
.thirdCenter, .fourthCenter {

border-style: solid;
border-color: black;
position:absolute;
color:white;
text-align:center;
vertical-align:middle;
cursor:pointer;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;

}

.hidden {

visibility:hidden;
opacity:0;

}

.firstBox, .firstLeft, .firstCenter {

top:1.125%;
bottom:75.125%;

}

.secondBox, .secondLeft, .secondCenter {

top:26.25%;
bottom:50.5625%;

}

.thirdBox, .thirdLeft, .thirdCenter {

top:50.5625%;
bottom:26.25%;

}

.fourthBox, .fourthLeft, .fourthCenter {

top:75.125%;
bottom:1.125%;

}

.expand {

width:70%;
top:1.25%;
bottom:1.25%;
left:12.5%;

}

.firstLeft, .secondLeft, 
.thirdLeft, .fourthLeft {

left:.5%; 
width:11.5%;

}

.firstCenter, .secondCenter, 
.thirdCenter, .fourthCenter {

width:50% !important;
left:25% !important;


}

.translateRight {

width:15%;
left:83%;
top:1.25%;
bottom:1.25%;

}

css:

<section id="content">
    <div id="firstBox" class="firstBox" onclick="firstBoxController()">
        2000-2005
    </div>
    <div id="secondBox" class="secondBox" onclick="secondBoxController()">
        2005-2010
    </div>
    <div id="thirdBox" class="thirdBox" onclick="thirdBoxController()">
        2010-2015
    </div>
    <div id="fourthBox" class="fourthBox" onclick="fourthBoxController()">
        2015-2020
    </div>
    <div id="firstSub"  class="hidden"></div>
    <div id="secondSub" class="hidden"></div>
    <div id="thirdSub"  class="hidden"></div>
    <div id="fourthSub" class="hidden"></div>
</section>

//var declarations
var first     = document.getElementById("firstBox");
var firstSub  = document.getElementById("firstSub");
var second    = document.getElementById("secondBox");
var secondSub = document.getElementById("secondSub");
var third     = document.getElementById("thirdBox");
var thirdSub  = document.getElementById("thirdSub");
var fourth    = document.getElementById("fourthBox");
var fourthSub = document.getElementById("fourthSub");

//movement functions
function firstLeft() {
    first.className = "firstLeft";
}

function firstExpand() {
    first.className = "expand";
    firstSub.className = "translateRight";
}

function secondLeft() {
    second.className = "secondLeft";
}

function secondExpand() {
    second.className = "expand";
    secondSub.className = "translateRight";
}


function thirdLeft() {
    third.className = "thirdLeft";
}

function thirdExpand() {
    third.className = "expand";
    thirdSub.className = "translateRight";
}


function fourthLeft() {
    fourth.className = "fourthLeft";
}

function fourthExpand() {
    fourth.className = "expand";
    fourthSub.className = "translateRight";
}

//controller functions

function firstBoxController() {

    if (first.classList.contains("firstBox")) {
        secondLeft();
        thirdLeft();
        fourthLeft();
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(firstExpand, 1000);
}

function secondBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("secondBox")) {
        firstLeft();
        thirdLeft();
        fourthLeft();
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(secondExpand, 1000);
}

function thirdBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("thirdBox")) {
        firstLeft();
        secondLeft();
        fourthLeft();
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(thirdExpand, 1000);
}

function fourthBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("fourthBox")) {
        firstLeft();
        secondLeft();
        thirdLeft();
    }

    window.setInterval(fourthExpand, 1000);
}

.firstBox, .secondBox, 
.thirdBox, .fourthBox {

    width:70%;
    left:12.5%;

}

.firstBox, .secondBox, .thirdBox, 
.fourthBox, .firstSub, .secondSub, 
.thirdSub, .fourthSub, .translateRight, 
.firstLeft, .secondLeft,
.thirdLeft, .expand,
.fourthLeft, .hidden, 
.firstCenter, .secondCenter,
.thirdCenter, .fourthCenter {

border-style: solid;
border-color: black;
position:absolute;
color:white;
text-align:center;
vertical-align:middle;
cursor:pointer;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;

}

.hidden {

visibility:hidden;
opacity:0;

}

.firstBox, .firstLeft, .firstCenter {

top:1.125%;
bottom:75.125%;

}

.secondBox, .secondLeft, .secondCenter {

top:26.25%;
bottom:50.5625%;

}

.thirdBox, .thirdLeft, .thirdCenter {

top:50.5625%;
bottom:26.25%;

}

.fourthBox, .fourthLeft, .fourthCenter {

top:75.125%;
bottom:1.125%;

}

.expand {

width:70%;
top:1.25%;
bottom:1.25%;
left:12.5%;

}

.firstLeft, .secondLeft, 
.thirdLeft, .fourthLeft {

left:.5%; 
width:11.5%;

}

.firstCenter, .secondCenter, 
.thirdCenter, .fourthCenter {

width:50% !important;
left:25% !important;


}

.translateRight {

width:15%;
left:83%;
top:1.25%;
bottom:1.25%;

}

---

您可以通过将

setInterval

方法更改为

setTimeout

来获得所需的功能，如本演示所示-。这将只执行一次函数，而不是每秒重复调用它们

但是你肯定可以改进你的代码更多

更新

我认为您可以将代码缩短为如下所示。检查演示-

和标记

<section id="content">

    <div id="first" class="box" onclick="boxController(this)">1 2000-2005</div>
    <div id="second" class="box" onclick="boxController(this)">2 2005-2010</div>
    <div id="third" class="box" onclick="boxController(this)">3 2010-2015</div>
    <div id="fourth" class="box" onclick="boxController(this)">4 2015-2020</div>

    <div id="firstSub" class="hidden">1</div>
    <div id="secondSub" class="hidden">2</div>
    <div id="thirdSub" class="hidden">3</div>
    <div id="fourthSub" class="hidden">4</div>

</section>

1 2000-2005
2 2005-2010
3 2010-2015
4 2015-2020
1.
2.
3.
4.

双倍行距实际上对眼睛更难，这就是问题所在。非常感谢。除了每个人都很快指出的缩进编辑之外，您还将如何改进它？我对JavaScript不太了解。嗨！我更新了答案，提出了一些如何改进代码的想法