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状态。 个人偏好。。。但它确实有效。

＆＃13;

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");
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

菜单未使用切换

1 个答案: