Javascript Side Content 在切换样式后继续出现

Question

我正在尝试为我的响应式网站创建侧边菜单。我对 JavaScript 不是很擅长，但它可以工作! (到目前为止)

我的问题是，我正在切换 <nav>类使其从左侧出现和消失。要单击的按钮在 <nav> 之外内容和关闭按钮是 <nav> 中的简单文本内容。

所以，我的 HTML 看起来像这样:

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

这就是我要切换的导航。打开的按钮应该是这个图像:

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

CSS:

.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}

.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}

和我的 JAVASCRIPT:

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

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

到目前为止一切正常!但是当我点击关闭文本，并在关闭 <nav> 之后它一直显示<nav>像这张图片的内容:

Image with example of problem

有什么办法可以解决吗？

Answer 1

JQuery toggleClass确实向元素添加了一个新类。如果它已经有那个类，它将把它从那个元素中删除。因此，虽然您的导航的基类是导航幻灯片，但仅切换导航打开(不是两者)。这是一个略有不同的动画侧边导航的基本示例:

$('button').on('click', function (e) {
  $('.menu').toggleClass('open');
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 20%;
  background-color: tomato;
  
  transform: translate(-100%, 0);
  transition: transform 1s;
}

.menu.open {
  transform: translate(0, 0);
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
  <button>close</button>
</div>

编辑:这是您示例的笔: http://codepen.io/wilmaknattern/pen/xZXMaW