Блог

В приведенном ниже примере я покажу вам пример того, что у меня есть прямо сейчас, и вы заметите, что при нажатии на черный ящик из-под моей боковой панели появится другой черный ящик большего размера! хотя в jsfiddle это трудно определить, в браузерах это очень заметно, но с помощью z-index мне удалось заставить окно правильно выдвигаться из-под боковой панели, однако, когда вы нажимаете на него снова, чтобы отправить окно обратно, оно выходит поверх боковой панели, а не обратно под нее. Я попробовал несколько простых вещей, которые не сработали! Пожалуйста, помогите мне! 🙂

HTML

 <div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState"></div>
</div>
  

CSS — файл

 #sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    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;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #000;
    top:0;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}
  

jQuery

 $(function() {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
$(function() {
    $("#regionsUnitedStates").on("click", function() {
        $("#regionsUnitedStatesChooseState").toggleClass("show");
        $("#regionsUnitedStates").toggleClass("not-open");
    });
});
  

Пример:

JSFIDDLE ( ошибка )

Я обновил вашу скрипкуhttp://jsfiddle.net/z35LQ/1

Я добавил z-index в CSS, когда regionsUnitedStatesChooseState скрыт.

Ваш regionsUnitedStatesChooseState div перемещался по боковому меню в обоих направлениях. Если вы добавите z-index для обоих состояний, он всегда будет находиться за боковой панелью.