向左滑动移动菜单，然后使用 JQuery 向下滑动答案

【问题标题】：Slide mobile menu left, then down with JQuery向左滑动移动菜单，然后使用 JQuery 向下滑动
【发布时间】：2014-11-23 06:04:49
【问题描述】：

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

附：我尝试使用.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/

【问题讨论】：

标签： jquery css animation slide slidetoggle

【解决方案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/

【讨论】：

正是我想要的。谢谢！

【解决方案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>

【讨论】：