切换样式后，Javascript端内容会继续出现

我正在尝试为我的响应网站创建一个侧菜单。我不太擅长JavaScript，但它可以工作！（至今）

我的问题是，我正在切换

类，使其从左侧显示并消失。要单击的按钮位于

内容之外，要关闭的按钮是

内容内的简单文本

因此，我的HTML如下所示：

<nav id="nav-slide" class="nav-slide">
        Side Content <br>
        <a href="#" class="close" id="close-button">Close</a>
</nav>

还有我的JAVASCRIPT：

$("#menu-icon").click(function(){
    $("#nav-slide").toggleClass("nav-open");
});

$("#close-button").click(function(){
    $("#nav-slide").toggleClass("nav-slide");
});

到目前为止他还在工作！但当我单击Close text时，在关闭

后，它会继续显示

内容，如下图所示：

<a href="#"><img id="menu-icon" src="images/menu-icon.svg"/></a>

有什么办法可以解决这个问题吗？

JQuerys会向一个项添加一个新类。如果它已经具有该类，它将从该项中删除该类。因此，当导航的基类是导航幻灯片时，只切换导航打开（而不是同时切换两者）。下面是一个稍有不同的动画侧导航基本示例：

$（'button'）。在（'click'，函数（e）{
$（'.menu'）.toggleClass（'open'）；
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
.菜单{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：20%；
背景色：番茄；
转换：转换（-100%，0）；
转变：转变1s；
}
.菜单.打开{
变换：平移（0,0）；
}

菜单
关闭
嘿，尽管动画不同，但尝试一下这个解决方案是可行的！！你好，托马斯谢谢你的回答。但如果不是两个同名按钮，而是链接按钮呢？@Eugenio，完全一样。只需确保只切换
nav-open
。@Eugenio:我用你例子中的代码加了一支笔。非常感谢托马斯！我想我现在明白多了：D！你好@Thomas，还有一个问题，如果我想同时使用esc按钮关闭幻灯片？
$("#menu-icon").click(function(){
    $("#nav-slide").toggleClass("nav-open");
});

$("#close-button").click(function(){
    $("#nav-slide").toggleClass("nav-slide");
});