Question

精疲力尽，试图找出问题所在。我似乎无法使菜单框滑出。 https://jsfiddle.net/87cd9341/5/

当我单击“导航切换”时，我的滑动菜单框不会滑出。不知道z-index是否与它有任何关系，因为我正在使用它来覆盖某些元素，但这不对吗？

我刚刚添加了代码的主要元素...当您单击黑色选项卡时，蓝色框应该正确发射了吗？

当II手动将“ open”添加到html的“ nav-side”类中或在CSS的“ nav-side”的转换部分中输入0％时，这就是我想做的事情点击带有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

问题可能是位置或z-index。请提供一个jsfiddle。

Answer 2

在.中缺少点$("nav-side")

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

滑出菜单栏，但单击不起作用

2 个答案: