向左滑动移动菜单，然后向下滑动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); 
}); 

P.S.我尝试使用.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; 
    } 
}); 

这里是jsfidd文件链接： http://jsfiddle.net/3bmduf55/

Answer 2

交替简单根据菜单状态的延迟（我保存它的数据集）+一些变化在你的CSS：

var $mobMenuWrap = $('#mainmenu-mobile-wrap'); 
 
var $mobMenuTog = $('#mobile-menu-toggler'); 
 
var $mobMenu = $('#mainmenu-mobile'); 
 

 
$mobMenuTog.click(function(){ 
 
    var io = this.dataset.io ^= 1; // I/O Toggler 
 
    $mobMenuWrap.delay(io?0:700).animate({right:io?0:-280},700); 
 
    $mobMenu.delay(io?700:0).slideToggle(700); 
 
});

#mainmenu-mobile-wrap { 
 
    position: fixed; 
 
    top:0; 
 
    right: -280px; 
 
    width: 280px; 
 
    z-index: 1000; 
 
} 
 

 
#mainmenu-mobile { 
 
    overflow:hidden; 
 
    display:none; 
 
    background:#ddd; 
 
} 
 

 
#mobile-menu-toggler{ 
 
    position:absolute; 
 
    left: -50px; 
 
    width: 50px; 
 
    height: 25px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainmenu-mobile-wrap"> 
 
    <div id="mobile-menu-toggler" class="mobile-menu-toggler"></div> 
 
    <div id="mainmenu-mobile"> 
 
    <ul> 
 
     <li>1111111</li> 
 
     <li>22222222222222</li> 
 
     <li>3333333333333</li> 
 
    </ul> 
 
    </div> 
 
</div>