CSS动画仅生效一次：Toggle开关每次触发需easeOut动画

我编写了如下代码，希望Toggle开关在每次展开和收起时都能呈现easeOutExpo动画效果，但该动画仅在首次展开时生效。

$('.toggle-content:not(.opened), .content-tab:not(.opened)').hide();

$('.tab-index a').click(function () {
    $(this).parent().next().slideToggle(300, 'easeOutExpo', function () {
        if ($(this).is(':visible'))
            $(this).css('display', 'table-row');
        else
            $(this).css('display', 'hidden')
    });
    $(this).parent().toggleClass('tab-opened tab-closed');
    $(this).children('i').toggleClass('icon-plus-sign icon-minus-sign');
    $(this).attr('text', ($(this).attr('text') == 'Close') ? 'Open' : 'Close');
    return false;
});

使用示例代码：

<div class="toggle">
  <p class="tab-index tab-closed">
      <a href="#" title="Close"><i class="icon-plus-sign"></i> text</a>
  </p>
  <div class="content-tab closed">
      <p>text</p>
  </div>
</div>

问题出在你动画回调里的display: hidden设置上。jQuery的slideToggle动画依赖元素的display状态为block或none来判断动画方向，你手动把收起后的元素设为display: hidden，打破了jQuery的状态判断逻辑，导致下次触发动画时无法正常执行。

修改后的代码如下：

// 初始隐藏未激活的内容，用hide()确保元素状态为display:none
$('.toggle-content:not(.opened), .content-tab:not(.opened)').hide();

$('.tab-index a').click(function () {
    const $targetContent = $(this).parent().next();
    
    $targetContent.slideToggle(300, 'easeOutExpo', function () {
        // 仅在展开时设置display为table-row，满足布局需求
        if ($(this).is(':visible')) {
            $(this).css('display', 'table-row');
        }
        // 收起时不手动设置display，让jQuery自动处理为display:none
    });
    
    $(this).parent().toggleClass('tab-opened tab-closed');
    $(this).children('i').toggleClass('icon-plus-sign icon-minus-sign');
    $(this).attr('text', $(this).attr('text') === 'Close' ? 'Open' : 'Close');
    
    return false;
});

关键改动说明： #

• 移除display: hidden设置：收起时让jQuery自动将元素设为display:none，保持动画状态的一致性。
• 仅在展开后设置table-row：展开完成后修改display值不影响动画逻辑，还能满足你需要的表格行布局。
• 优化变量缓存：用$targetContent缓存目标元素，提升代码可读性和性能。

这样修改后，展开和收起都会正常触发easeOutExpo动画了。

内容的提问来源于stack exchange，提问作者elena