javascript - 使用切换菜单不滑动

Question

我试图让一个菜单在点击一个按钮时向左滑动，然后在点击同一个按钮时滑回原来的位置。我正在使用切换，但我似乎无法让它工作。该按钮也会向右滑动，以便在菜单不可见时可见。如果没有切换方法，菜单和按钮会正确滑动，但不会向后滑动。

JQuery:

$("#menu-button").click(function() {
    $("#menu-button").toggle(function() {
        $("#menu").animate({
            "left": "-=300px"
        }, "slow");
        $("#menu-button").animate({
            "right": "-=60px"
        }, "slow");

    },

    function() {

        $("#menu").animate({
            "left": "+=300px"
        }, "slow");
        $("#menu-button").animate({
            "right": "-=60px"
        }, "slow");

    }
});

});

HTML:

<div id="menu">
<button id="menu-button">press</button>
</div>

CSS:

#menu {

  width: 300px;
  height: 500px;
  background-color: black;
  position: absolute;
  left: 0;
}

#menu-button {
  width: 48px;
  height: 48px;
  background-color: red;
  float: right;
  margin: 10px;
  text-align: center;
  cursor:pointer; 
  position: relative;
}

Answer 1

与切换不同，我发现最简单的方法可能是在几年后审查明确的代码。个人偏好是使用 var 来存储当前的 div 状态。 个人喜好。 . .但它有效。

var menuOut = true;
$("#menu-button").click(function() {
  if (menuOut){
      menuOut = false;
      $("#menu").animate({
        "left": "-300px"
      }, "slow");
      $("#menu-button").animate({
        "left": "60px"
      }, "slow");
  }else{
      menuOut = true;
      $("#menu").animate({
        "left": 0
      }, "slow");
      $("#menu-button").animate({
        "left": 0
      }, "slow");
  }
});

#menu {
  position: absolute;
  left: 0;
  width: 300px;
  height: 500px;
  background-color: darkcyan;
}
#menu-button {
  position: relative;
  width: 48px;
  height: 48px;
  background-color: red;
  float: right;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="menu">
<button id="menu-button">press</button>
</div>