jquery - 向左滑动移动菜单，然后使用 JQuery 向下滑动

Question

我正在尝试让移动菜单从右侧滑动然后向下滑动。我能够做到这一点，但我还需要它在第二次单击时向上和向右滑动。但是，它只是同时执行此操作，并且在单击之后它不再按顺序执行这些动画。代码如下。我需要修复它，以便在菜单打开期间: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/

Answer 1

解决方法:

(如果这是你想要的，因为我不知道我是否理解你)

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