jquery动画菜单打开但不会关闭答案

【问题标题】：jquery animated menu opens but won't closejquery动画菜单打开但不会关闭
【发布时间】：2016-06-01 15:02:15
【问题描述】：

我有一个移动菜单，当单击汉堡包时，该菜单当前会从视口的右边缘以动画方式打开。但随后单击汉堡包什么也没做。它应该将菜单设置为关闭位置。我尝试了以下多种变体，但均未成功。

$('#menu-wrap').prepend('<div id="menu-trigger"><i class="fa fa-bars fa-2x"></i></div>');
$("#menu-trigger").on("click", function(){
    $('this').addClass('opened');
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');        
});
$("#menu-trigger.opened").on("click", function(){
    $('this').removeClass('opened');
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px');
});

我已验证 #menu-trigger 确实收到了“已打开”类，但它在第一次点击后没有响应。

【问题讨论】：

标签： jquery

【解决方案1】：

这两个点击事件仍然会触发，因为您没有告诉第一个点击事件不要以任何方式触发。这可能会导致实际发生的事情出现问题。

考虑将代码重写为更清晰的内容，如下所示：

$("#menu-trigger").on("click", function(){
  if($(this).hasClass('opened'){
    $(this).removeClass('opened');
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px');
  } else {
    $(this).addClass('opened');
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');        
  }
});

另外，$('this') 和 $(this) 不一样 - 前者会在 DOM 中查找标签名称为 this 的元素（如 <this></this>），这不是您想要的。

$("#menu-trigger").on("click", function() {
  if ($(this).hasClass('opened')) {
    $(this).removeClass('opened');
    $('#menu').animate({
      width: '0'
    }, 500).css('padding', '0px');
  } else {
    $(this).addClass('opened');
    $('#menu').animate({
      width: '220'
    }, 500).css('padding', '40px');
  }
});

#menu-trigger {color: red}
#menu-trigger.opened {color: green}
#menu {border: 1px solid black; display: inline-block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menu-trigger">Menu trigger</button><br>
<div id="menu">Menu</div>

【讨论】：