切换样式后Javascript边内容继续出现

Question

我正在尝试为我的响应式网站创建一个侧菜单。我对JavaScript不是很擅长，但它很管用！（目前为止）

我的问题是，我正在切换

类，使它从左侧出现和消失。要单击的按钮在

内容的外部，而要关闭的按钮是

内容内部的一个简单文本。

所以，我的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");
});

到目前为止还管用！但是，当我单击“关闭文本”时，并且在关闭

之后，它会继续显示

内容，如下图所示：

带问题示例的图像

有办法解决吗？

Answer 1

JQuerys的toggleClass确实会向项中添加一个新类。如果它已经有了那个类，它将从那个项中移除它。因此，当您的导航的基类是导航滑动时，只切换导航打开（而不是两个）。下面是一个稍微不同的动画侧向导航的基本示例：

null

$('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>