我有一段代码,当用户点击图片时就会运行。基本上,菜单应该使用.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>
您绑定同一事件两次,因此它被触发两次,并且您的变量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
}
});
});
在这种情况下,您不必检查像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>
想想你在这里做什么:menuitem
最初是false
。因此执行第一个if
语句。在if
语句的末尾,menuitem
被更改为true
THEN我们进入第二条if
语句(在第二个click
处理程序中),在这里检查menuitem
是否为true
。但事实确实如此——我们只是设定了它!因此if
语句也会运行——菜单滑入,然后再次滑出。
相反,您希望使用else
只运行其中一个。(我还删除了== true
和== false
,因为它们完全没有必要-谷歌可以更好地理解boolean
和if
):
$("#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
}
});
您是否尝试过在同一个函数中执行所有操作?
$("#menupic").click(function(e) {
if(menuopen==false){
$(".menu").animate({left:"0px"},200)
menuopen=true;
}else{
$(".menu").animate({left:"-400px"},200)
menuopen=false;
}
});