Javascript 打开和关闭菜单jQuery

我试图制作一个简单的菜单，当你点击按钮一次时打开，然后第二次关闭，我以前做过，但现在我不记得怎么做了，我想下面是代码：

var main=function（）{
$（“#菜单打开”）。单击（函数（）{
$（'.leftbox'）.show（）；
$（'.leftbox'）.animate（{left:“0”}）；
$（'.topbox'）.animate（{左：“15%”，宽：“85%”）；
},
函数（）{
$（'.leftbox'）.animate（{left:'-15%}）；
$（'.leftbox'）.hide（）；
$（'.topbox'）.animate（{左：“0”，宽：“100%”）；
}
);
}
$（文件）.ready（主）
正文{
背景色：#中交；
}
氢{
文本对齐：居中；
字体系列：“Lato”，无衬线；
}
.机顶盒{
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：10%；
背景色#006699；
}
.左框{
显示：无；
位置：绝对位置；
背景色：#FFFFFF；
顶部：0px；
左-15%；
宽度：15%；
身高：100%；
盒影：10px 67px 5px#8888888；
}
#评论框{
位置：绝对位置；
最高：87%；
左：30%；
宽度：50%；
调整大小：无；
边界半径：5px；
大纲：无；
盒影：10px 10px 10px#8888888；
}
#提交箱{
位置：绝对位置；
背景色#006699；
左：82%；
最高：87%；
高度：66px；
宽度：132px；
边界半径：5px；
边界：0px；
大纲：无；
盒影：10px 10px 10px#8888888；
字体系列：“Lato”，无衬线；
字号：；
}
#美诺朋{
位置：绝对位置；
最高：25%；
左：15px；
高度：32px；
宽度：32px；
}

大堂
您的代码基本正确，但创建一个变量，例如
var open=false
然后在用户单击按钮时执行检查，执行如下操作：如果（open==false）{execute opening}

那么

否则{execute closing}

，因为jquery不知道它是否打开，所以必须对它进行检查。

您的代码基本正确，但创建了一个变量，例如

var open=false

然后在用户单击按钮时执行检查，执行如下操作

如果（open==false）{execute opening}

则

否则{execute closing}

，因为jquery不知道它是否打开，所以您必须对它进行检查。

@George打败了我，但您可以添加一个

opened

状态变量，每次单击后都会切换：

var main=function（）{
var=false；
$（“#菜单打开”）。单击（函数（）{
如果（打开）{
$（'.leftbox'）.animate（{left:'-15%}）；
$（'.leftbox'）.hide（）；
$（'.topbox'）.animate（{左：“0”，宽：“100%”）；
}否则{
$（'.leftbox'）.show（）；
$（'.leftbox'）.animate（{left:“0”}）；
$（'.topbox'）.animate（{左：“15%”，宽：“85%”）；
}
打开=！打开；
});
}
$（文件）.ready（主）
正文{
背景色：#中交；
}
氢{
文本对齐：居中；
字体系列：“Lato”，无衬线；
}
.机顶盒{
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：10%；
背景色#006699；
}
.左框{
显示：无；
位置：绝对位置；
背景色：#FFFFFF；
顶部：0px；
左-15%；
宽度：15%；
身高：100%；
盒影：10px 67px 5px#8888888；
}
#评论框{
位置：绝对位置；
最高：87%；
左：30%；
宽度：50%；
调整大小：无；
边界半径：5px；
大纲：无；
盒影：10px 10px 10px#8888888；
}
#提交箱{
位置：绝对位置；
背景色#006699；
左：82%；
最高：87%；
高度：66px；
宽度：132px；
边界半径：5px；
边界：0px；
大纲：无；
盒影：10px 10px 10px#8888888；
字体系列：“Lato”，无衬线；
字号：；
}
#美诺朋{
位置：绝对位置；
最高：25%；
左：15px；
高度：32px；
宽度：32px；
}

大堂
@George抢先一步，但您可以添加一个
打开的
状态变量，该变量在每次单击后都会切换：


var main=function（）{
var=false；
$（“#菜单打开”）。单击（函数（）{
如果（打开）{
$（'.leftbox'）.animate（{left:'-15%}）；
$（'.leftbox'）.hide（）；
$（'.topbox'）.animate（{左：“0”，宽：“100%”）；
}否则{
$（'.leftbox'）.show（）；
$（'.leftbox'）.animate（{left:“0”}）；
$（'.topbox'）.animate（{左：“15%”，宽：“85%”）；
}
打开=！打开；
});
}
$（文件）.ready（主）
正文{
背景色：#中交；
}
氢{
文本对齐：居中；
字体系列：“Lato”，无衬线；
}
.机顶盒{
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：10%；
背景色#006699；
}
.左框{
显示：无；
位置：绝对位置；
背景色：#FFFFFF；
顶部：0px；
左-15%；
宽度：15%；
身高：100%；
盒影：10px 67px 5px#8888888；
}
#评论框{
位置：绝对位置；
最高：87%；
左：30%；
宽度：50%；
调整大小：无；
边界半径：5px；
大纲：无；
盒影：10px 10px 10px#8888888；
}
#提交箱{
位置：绝对位置；
背景色#006699；
左：82%；
最高：87%；
高度：66px；
宽度：132px；
边界半径：5px；
边界：0px；
大纲：无；
盒影：10px 10px 10px#8888888；
字体系列：“Lato”，无衬线；
字号：；
}
#美诺朋{
位置：绝对位置；
最高：25%；
左：15px；
高度：32px；
宽度：32px；
}

大堂
谢谢，我知道这种方法，但我认为有一种更简单的方法。有一种更简单的方法，但我认为它的可读性不如toggle（）函数。好的，我已经做了，它工作得非常完美，但是，当动画关闭它时，它就不可见了，这是代码$（'.leftbox'）。animate（{left:“-15%”）；$（'.topbox'）.animate（{左：“0”，宽：“100%”）；开=假$（'.leftbox'）.hide（）；好的，我不太确定，但我认为这与.hide（）和.show（）函数有关。这些函数需要什么，试着删除它们，看看会发生什么。我确实删除了它们，它工作了，问题是阴影仍然存在，我希望它们被隐藏，我不认为只删除阴影是正确的修复方法。谢谢，我知道这一点