向左滑動移動菜單，然後向下滑動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>