单击不起作用的滑出菜单栏

Posted 2023-05-08

【中文标题】单击不起作用的滑出菜单栏

【英文标题】：Slide out menu bar with click not working

【发布时间】：2019-05-22 10:14:04

【问题描述】：

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

单击“导航切换”时，我的滑动菜单框不会滑出。 不确定z-index是否与它有关，因为我正在使用它来覆盖一些元素，但它不应该是正确的？

我只是添加了代码的主要元素......当你点击黑色标签时，蓝色框应该会射出来吧？

当II手动将“open”添加到“nav-side”的类中到html中或将0%输入到“nav-side”的转换部分到css中时，这就是我想要发生的事情点击带有 jquery/javascript 的“nav-toggle”。

<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" 链接时????????

【问题讨论】：

提供脚本

【参考方案1】：

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

【讨论】：

link 感谢您对此进行调查。使用 z-index 的容器的位置都有固定的位置。 jsfiddle.net/87cd9341/2

【参考方案2】：

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

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

【讨论】：

你的编辑jsfiddle.net/87cd9341/8点击黑色标签后显示蓝色框，见this gif image