我正在尝试从右侧滑动移动菜单,然后向下滑动。我能够做到这一点,但是我还需要它在第二次单击时向上滑动并向右滑动。但是,它只是同时执行此操作,并且在单击之后不再按顺序执行这些动画。代码如下。我需要对其进行修复,以便在打开菜单期间:1.向左滑动,2.向下滑动。在菜单关闭过程中:1.向右滑动/结束,向右滑动2。
$(".mobile-menu-toggler").click(function (){
$(this).removeClass('mobile-menu-toggler');
$(this).addClass('mobile-menu-toggler-clicked');
$("#mainmenu-mobile").toggle({direction:'left'},700).animate({'height':'100%'},700);
});
$(".mobile-menu-toggler-clicked").click(function (){
$(this).removeClass('mobile-menu-toggler-clicked');
$(this).addClass('mobile-menu-toggler');
$("#mainmenu-mobile").toggle({direction:'left'},700).animate({'height':'0'},700);
});
附言我尝试使用
.show
和.hide
而不是.toggle
。它会显示,但随后不会隐藏。CSS:
#mainmenu-mobile-wrap {
display: block;
position: fixed;
top:0;
right: 0;
z-index: 1000;
height: 100%;
}
#mainmenu-mobile {
display: none;
float: right;
width: 280px;
height: 0;
}
#mobile-menu-toggler{
width: 50px;
height: 25px;
background: red;
float: left;
}
http://jsfiddle.net/uptjwuaj/
最佳答案
这是解决方案:
(如果那是您想要的,因为我不知道我是否了解您)
$open=false;
$(".mobile-menu-toggler").click(function (){
if($open==false){
$("#mainmenu-mobile").toggle({direction:'left'},700).animate({'height':'100%'},700);
$open=true;
}else{
$("#mainmenu-mobile").animate({'height':'0'},700).toggle({direction:'left'},700);
$open=false;
}
});
这是jsfiddle链接:
http://jsfiddle.net/3bmduf55/