Javascript jquery菜单动画关闭/打开

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

在菜单之间切换=否不设置动画

打开和关闭菜单=动画（打开时向上滑动/关闭时向下滑动）

我有以上所有-除了在关闭时设置动画。有人有什么建议可以让我离开这个洞吗

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

这是我的

我的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;
    }    
  });
});

---

您可以不使用jQuery的动画，只使用CSS（仅使用jQuery切换类）：

CSS:

.stickers__content {
      position: absolute;
      bottom: 60px;
      left: 0;
      display: block;
      width: 100vw;
      height: 125px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-x: auto;
      white-space: nowrap;
      transition:.2s;
      transition-property:transform, opacity;
      transform:scaleY(0);
      transform-origin:bottom center;
      opacity:0;
    }
    .stickers__content.open{
      transform:scaleY(1);
      opacity:1;
    }

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

  $(".pack__button", $dropdown).click(function(e) {
      var content=$(this).parent().find('.stickers__content');
    content.toggleClass('open');
    $('.stickers__content').not(content).removeClass('open')
  });
});

jQuery:

.stickers__content {
      position: absolute;
      bottom: 60px;
      left: 0;
      display: block;
      width: 100vw;
      height: 125px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-x: auto;
      white-space: nowrap;
      transition:.2s;
      transition-property:transform, opacity;
      transform:scaleY(0);
      transform-origin:bottom center;
      opacity:0;
    }
    .stickers__content.open{
      transform:scaleY(1);
      opacity:1;
    }

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

  $(".pack__button", $dropdown).click(function(e) {
      var content=$(this).parent().find('.stickers__content');
    content.toggleClass('open');
    $('.stickers__content').not(content).removeClass('open')
  });
});

---

我正在计算您单击的菜单项，并将其保存为单击的变量。当你再次单击菜单项时，它会检查最后一个菜单项是否被单击，并运行切换或滑动切换。

谢谢@Amijafari不幸的是，这不太管用，当我在你的FiddleCool中尝试时，每次单击都会同时打开两个菜单：）但这仍然不是一个解决方案，这正是我想要避免的。在菜单之间单击时，设置它们的动画效果不好，因为它看起来很糟糕。它不光滑。我试图在菜单之间切换时简单地打开/关闭它们。就像我的一样。并仅在关闭所有菜单时设置动画（向上/向下滑动）。我的工作就像我想要的，除了关闭所有菜单时，它没有动画…谢谢你的解释。鳗鱼！很好的解决方案谢谢：）