Выдвиньте строку меню с щелчком не работает

Question

Исчерпаны попытки понять, что не так.Кажется, я не могу вытащить свое меню.https://jsfiddle.net/87cd9341/5/

Мое скользящее окно меню не выскальзывает, когда я нажимаю на кнопку "nav-toggle".Не уверен, имеет ли z-index какое-либо отношение к этому, потому что я использую его для покрытия некоторых элементов, но это не должно быть верно?

Я просто добавил основные элементы кода ... когда вынажмите на черную вкладку, синий прямоугольник должен выстрелить, верно?

Когда II вручную добавляет "open" в класс для "nav-side" в html или вводит 0% в раздел transform"nav-side" в css, это то, что я хочу, чтобы после нажатия кнопки "nav-toggle" с помощью jquery / javascript.

<div class="nav-side">
</div>
<div class="tab-container">
    <a href="#" class="nav-toggle"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>

.plageholder-container {
    display: block;
    width: 29.064039%;
    min-width: 121px;
    max-width: 121px;
    margin-left: 2.955665%;
    position: fixed;
    bottom: 2.955665%;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    background: #ffffff;
    z-index:2;
    }

.nav-side {
    display: inline-block;
    width: 29.064039%;
    height:121px;
    border-width:3px;
    min-width: 295px;
    max-width: 500px;   
    position: fixed;
    bottom: 2.955665%;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    background-color:blue;
    z-index:1;
    margin-left: 2.955665%;
    padding-left: 120px;
    transform:translateX(-100%);
    transition: transform .06s ease;
}

.nav-side.open {
    transform:translateX(0);
}

.tab-container{
    display: inline-block;
    width: 29.064039%;
    height:121px;
    border-width:3px;
    min-width: 25px;
    max-width: 25px;    
    position: fixed;
    bottom: 2.955665%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 126px;
    padding-right: 0px;
    overflow: hidden;
    background-color:#ffffcc;
    z-index:0;
    margin-left: 2.955665%;
}

.nav-toggle{
    position: relative;
    position: relative;
    display: inline-block;
    top: 3px;
    width:25px;
    height:121px;
    background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}

$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});

});

Теоретически,если мои исследования верны, я думаю, что class="nav-side" изменится на class="nav-side open", когда я нажму на ссылку "nav-toggle" ????????

Answer 1

Отсутствует точка . в $("nav-side")

$(".nav-side").toggleClass("open");

Answer 2

Проблема, вероятно, либо в положении, либо в z-индексе.Пожалуйста, предоставьте jsfiddle.