javascript - jquery 菜单动画关闭/打开

Question

我试图在打开和关闭时实现动画，但在菜单之间切换时没有动画。

在菜单之间切换 = 不不动画

打开和关闭菜单=动画(打开则向上滑动/关闭则向下滑动)

我拥有以上所有 - 除了关闭时的动画。有没有人有任何建议可以让我摆脱困境!

(要关闭菜单，请在第一个 或第二个 菜单链接上单击两次，一次打开，一次关闭)

这是我的 DEMO

我的 jQuery

$('.pack__button--each').each(function() {
  var $dropdown = $(this);

  $(".pack__button", $dropdown).click(function(e) {
    e.preventDefault();
    if ($('.stickers__content').is(':visible')) {
      var $div = $(".stickers__content", $dropdown);
      $div.toggle(); 
      $(".stickers__content").not($div).hide();
      return false;
    } else {
      var $div = $(".stickers__content", $dropdown);
      $div.animate({
                height: "toggle",
                opacity: "toggle"
      }, "fast"); 
      $(".stickers__content").not($div).hide();
      return false;
    }    
  });
});

Answer 1

var clicked;
$('.pack__button--each').each(function() {
  var $dropdown = $(this);
  $(".pack__button", $dropdown).click(function(e) {
    e.preventDefault();
    if ($('.stickers__content').is(':visible')) {
      var $div = $(".stickers__content", $dropdown);
      if(clicked != $('.pack__button').index(this)) {
        $div.toggle(); 
      } else {
        $div.slideToggle(); 
      }
      $(".stickers__content").not($div).hide();
      clicked = $('.pack__button').index(this);
      return false;
    } else {
      var $div = $(".stickers__content", $dropdown);
      $div.animate({
                height: "toggle",
                opacity: "toggle"
      }, "fast"); 
      $(".stickers__content").not($div).hide();
      clicked = $('.pack__button').index(this);
      return false;
    }    
  });
});

我正在计算您点击了哪个菜单项并将其保存为点击变量。当您再次单击菜单项时，它会检查是否是上次单击的项目并运行 toggle 或 slideToggle。