Question

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

在菜单之间切换=不动画

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

我有以上所有 - 除了关闭动画。有没有人有任何建议可以让我离开这个洞！

（要关闭菜单，请在 First 或 Second 菜单链接上单击2次，一次打开，一次关闭）

这是 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。

Answer 2

你可以在没有jQuery动画的情况下做到这一点，只使用CSS（仅使用jQuery来切换课程）： DEMO

<强> 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;
    }

<强> jQuery的：

$('.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菜单动画关闭/打开

2 个答案: