Javascript 展开/缩回菜单栏

我使用jQuery从屏幕左侧展开/缩回菜单栏

以下是我目前掌握的情况：

$(document).ready(function(){
  $('.menu-button').on("click",
    function(){
      $('.menu').css("left","0");
      $('.menu-button').addClass("clicked");
    }
  );

  $('.menu-button clicked').on("click",
    function(){
      $('.menu').css("left","-168");
      $('.menu-button').removeClass("clicked");
    }
  );

});

菜单栏正在展开，但没有缩回。我认为这个代码是有意义的，但显然不是。想法

你需要改变

$('.menu-button clicked')

到

但问题是当你再次点击时。两次点击都会发生。因此，您可以添加和删除该类。为了解决这个问题，你可以做如下的事情

$(document).ready(function(){
  $('.menu-button').on("click", function(){
      if($('.menu-button').hasClass('clicked')) {
          $(this).removeClass("clicked");
          $('.menu').css("left","-168");
      } else {
          $(this).addClass("clicked");
          $('.menu').css("left","0");
      }
  });
});

但最简单的方法是像这样使用

toggleClass

：

$('.menu-button').on("click", function(){
    $('.menu').toggleClass( "clicked" );
    $(this).toggleClass( "clicked" );
});

如果可能，您应该始终通过CSS更改CSS，而不是使用javascript内联样式。。现在，使用

.toggleClass

可以切换类并更改css。只是在这里添加彩色边框，给你一个想法，但你可以随时改变你的风格

.menu {
    /* add your styles here */
    left: -168px;
    border: solid 2px red;
}

.menu.clicked {
    /* add your styles here */
    left: 0;
    border: solid 2px green;
}

.menu-button {
    /* add your styles here */
    border: solid 2px orange;
}

.menu-button.clicked {
    /* add your styles here */
    border: solid 2px lime;
}

---

@JakeMartinez你能分享你的HTML吗？

.menu

中的

.menu按钮

在哪里？menu按钮不在.menu内-它在外面，固定在页面的右上角。@JakeMartinez现在看到答案了，我已经更新了。现在可以用了吗？

.menu {
    /* add your styles here */
    left: -168px;
    border: solid 2px red;
}

.menu.clicked {
    /* add your styles here */
    left: 0;
    border: solid 2px green;
}

.menu-button {
    /* add your styles here */
    border: solid 2px orange;
}

.menu-button.clicked {
    /* add your styles here */
    border: solid 2px lime;
}