Сдвиньте меню влево, а затем вниз с помощью JQuery

Question

Я пытаюсь открыть слайд для мобильного меню справа, а затем спуститься вниз. Я был в состоянии сделать это, но мне также нужно, чтобы он сместился назад и направо на второй щелчок. Тем не менее, он просто делает это одновременно, и после этого щелчка он больше не делает эти анимации в порядке. Код ниже. Мне нужно исправить это так, чтобы во время открытия меню: 1. слайды влево, 2. падает вниз. Во время закрытия меню: 1.slides/wraps up, 2.slides right.

$(".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>