使用javascript推送对象时，如何打开div并关闭另一个div？

Question

寻找一些有关JavaScript的帮助！ 我一直在搞弄我已经尝试扩展的东西，但是我什么也做不了！ 反正让我解释一下！ 下面将有一个演示供您查看我在说什么！

现在，如果您按下黄色，黑色或红色按钮； 将会弹出一个窗口。 如果您打开了黑色按钮的窗口并按下红色按钮，则黑色按钮的窗口将向后滑动，红色按钮的窗口将出来。 现在这是我的问题！ 如果单击黑色按钮； 有一个灰色的盒子！ 如果单击灰色框； 另一个窗口将打开，并带有一个绿色框！ 现在，这个带有绿色框的窗口就是我被卡住的地方！ 带有绿色框的窗口将不与任何其他按钮反应。 打开此窗口后，您可以单击红色，黑色或黄色按钮，而不会发生任何事情。 所以我要做的是使带有绿色框的窗口与所有其他按钮反应，然后关闭并打开要打开的其他任何窗口。

我还想知道一件事！ 在与绿色框相同的窗口中有一个紫色框！ 我希望它是一个“后退”按钮。 因此，一旦您单击紫色按钮，它将恢复为您以前所在的窗口！

我对javascript仍然真的很陌生，并且在完全掌握它方面遇到很多麻烦！ 如果有人可以帮忙！ 我真的很感激！

这是一些代码！

的HTML

<div id="sidemenu">
  <div id="home" class="not-open regionsButton">
    <div id="homeTooltip"></div>
  </div>
  <div id="regionsContainer">
    <div id="regionsUnitedStates" class="not-open regionsButton">
      <div id="regionsUnitedStatesTooltip"></div>
    </div>
    <div id="regionsCanada" class="not-open regionsButton">
      <div id="regionsCanadaTooltip"></div>
    </div>
  </div>
  <div id="homeContent" class="regionsContent"></div>
  <div id="regionsUnitedStatesChooseState" class="regionsContent">
    <div id="chooseStateUnitedStatesColumnOne">
      <div id="chooseStateAlabama"></div>
    </div>
  </div>
  <div id="regionsCanadaChooseProvince" class="regionsContent">CDN</div>
</div>
<div id="regionsUnitedStatesAlabamaChooseCity">
  <div id="chooseCityAlabamaAbbeville"></div>
  <div id="chooseCityAlabamaAlabaster"></div>
</div>

的CSS

#home{
    width:60px;
    height:60px;
    top:0;
    position:absolute;
    background-color:#ffff00;
}
#homeTooltip {
    opacity:0;
    background-color:#ffff00;
    height:60px;
    width:100px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0px;
    visibility:hidden;
}
#home.not-open:hover #homeTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#home:hover {
    background-position:bottom;
    cursor:pointer;
}
#homeContent {
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 19%;
    background: #505759;
    top:60px;
    z-index:-1;
    opacity:0;
}
#sidemenu {
    width: 60px;
    max-height: 100%;
    min-height: 100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left: -60px;
    transition: left ease-in-out 0.5s;
    top: 0;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 100%;
    min-height: 100%;
    min-width: 60px;
    max-width: 60px;
    max-height: 100%;
    background-color: #383D3F;
    position: absolute;
    top:25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background-color:#111111;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background-color:#000;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsUnitedStates:hover {
    background-position:bottom;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -500px;
    width: 500px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}
#regionsCanada {
    width: 60px;
    height: 60px;
    background-color:#aa0114;
}
#regionsCanadaTooltip {
    opacity:0;
    background-color:#000000;
    height:60px;
    width:120px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:60px;
    visibility:hidden;
}
#regionsCanada.not-open:hover #regionsCanadaTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsCanada:hover {
    background-position:bottom;
}
#regionsCanadaChooseProvince{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -500px;
    width: 500px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
}
#regionsCanadaChooseProvince.show {
    left: 60px;
    z-index:-1;
}
#chooseStateUnitedStatesColumnOne {
    width:150px;
    height:540px;
    float:left;     
}
#chooseStateAlabama {
    width: 150px;
    height:54px;
    background-color:#999999;
    top:0px;
}
#chooseStateAlabama:hover {
    background-color:#999888;   
    cursor:pointer;
}
#regionsUnitedStatesAlabamaChooseCity {
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -750px;
    width: 750px;
    height: 540px;
    background: #505759;
    top: 0px;
    z-index:-1;
}
#regionsUnitedStatesAlabamaChooseCity.show {
    left: 60px;
    z-index:-1;
}
#chooseCityAlabamaAbbeville {
    width: 150px;
    height:54px;
    background-color:#008000;
    top:0px;
}
#chooseCityAlabamaAbbeville:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseCityAlabamaAlabaster {
    width: 150px;
    height:54px;
    background-color:#800080;
    top:54px;
}
#chooseCityAlabamaAlabaster:hover {
    background-position:bottom; 
    cursor:pointer;
}

JAVASCRIPT

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});

JSFIDDLE演示

JSFIDDLE

Answer 1

一个简单的解决方案（您的DOM可能会使用一些重构来配合更好的解决方案）：

在所有.regionsContent以及#regionsUnitedStatesAlabamaChooseCity和#regionsUnitedStatesAlaskaChooseCity上添加content类

然后在显示任何内容之前，仅需一个电话就隐藏所有内容：

$('.content').removeClass('show');

例