Question

我有一段代码在用户点击图片时运行。基本上，菜单应该使用.animate（）函数从屏幕外滑入。您应该再次单击相同的按钮以使其返回。然而，当我点击它时，菜单出现，但然后立即滑回。我知道这似乎是一个简单的问题，但我是一个新手。有什么帮助吗？

// JavaScript Document
$(document).ready(function(e) {
  var menuopen = false;

  $("#menupic").click(function(e) {
    if (menuopen == false) {
      $(".menu").animate({
        left: "0px"
      }, 200)
      menuopen = true;
    }
  });

  $("#menupic").click(function(e) {
    if (menuopen == true) {
      $(".menu").animate({
        left: "-400px"
      }, 200)
      menuopen = false
    }
  });
});

@charset "utf-8";

/* CSS Document */

.header {
  width: 1280px;
  background-color: #C29832;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 60px;
  z-index: 1000;
}
#logo1 {
  position: fixed;
  left: 70px;
  top: 0px;
}
#menupic {
  cursor: pointer;
  background-image: url('http://placehold.it/180x180/322F37/C29832.png&text=Menu');
  background-size: contain;
  height: 60px;
  width: 60px;
  z-index: 1001;
  position: fixed;
  left: 0px;
  top: 0px;
}
#menupic:hover {
  background-image: url('http://placehold.it/180x180/322F37/C29832.png&text=Menu2');
}
.menu {
  font-family: CordiaUPC;
  height: 800px;
  width: 400px;
  background-color: #000;
  color: #FFF;
  position: fixed;
  top: 60px;
  font-size: 36px;
  opacity: 0.85;
  left: -400px;
}
.menu div p {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  position: relative;
  left: 50px;
}
.menu div {
  position: relative;
  top: 20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="animation.js"></script>
    <title></title>
  </head>

  <body>
    <div class="menu">
      <div>
        <p>Home</p>
        <hr />
      </div>
      <div>
        <p>About</p>
        <hr />
      </div>
      <div>
        <p>Posts</p>
        <hr />
      </div>
      <div>
        <p>Other</p>
      </div>
    </div>
    <div class="header">
      <div id="menupic"></div>
      <img src="http://placehold.it/180x180/322F37/C29832.png&text=Logo1" height="60" width="60" id="logo1" />
    </div>
  </body>
</html>

Answer 1

你绑定相同的事件两次，所以它被触发两次，你的变量menuope在第一次调用中设置为true，然后在第二次调用中被验证为true

更改为此代码

$(document).ready(function(e) {
  var menuopen = false;

  $("#menupic").click(function(e) {
    if (menuopen == false) {
      $(".menu").animate({
        left: "0px"
      }, 200)
      menuopen = true;
    }
    else if (menuopen == true) {
      $(".menu").animate({
        left: "-400px"
      }, 200)
      menuopen = false
    }
  });
});

Answer 2

在这种情况下，您不必检查 true / false 等标志。只需这样使用它：

$("#menupic").click(function(e) {
  $(".menu").animate({
    left: $(".menu").css('left') == '-400px' ? "0px" : "-400px"
  }, 200);
});

检查下面的测试用例：

$("#menupic").click(function(e) {
  $(".menu").animate({
    left: $(".menu").css('left') == '-400px' ? "0px" : "-400px"
  }, 200);
});

.menu{position:relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='menupic'>menupic</div>
<div class='menu'>menu</div>

Answer 3

你是否尝试过同样的功能？

$("#menupic").click(function(e) {
    if(menuopen==false){
        $(".menu").animate({left:"0px"},200)
    menuopen=true;        

    }else{
        $(".menu").animate({left:"-400px"},200)
    menuopen=false;
    }
});

Answer 4

想想你在这里做了些什么：menuitem最初是false。所以执行第一个if语句。在if语句结束时，menuitem更改为true。那么我们到达第二个if语句（在第二个click处理程序中），您可以在其中检查menuitem是否为true。但它是 - 我们只是设定它！因此if语句也会运行 - 菜单会滑入，然后再次出来。

相反，您希望使用else仅运行其中一个。（我还删除了== true和== false，因为它们完全没有必要 - Google可以更好地了解boolean和if s：

$("#menupic").click(function(e) {
    if (menuopen) {
        // close the menu
        $(".menu").animate({
          left: "-400px"
        }, 200)
        menuopen = false;
    } else {
        // open the menu
        $(".menu").animate({
            left: "0px"
        }, 200)
        menuopen = true
    }
});

JQuery .animate（）菜单向后滑动

4 个答案: