依次切换类答案

【问题标题】：Toggle Class sequentially依次切换类
【发布时间】：2021-12-12 13:10:21
【问题描述】：

我正在尝试按顺序切换元素的类。我找到并修改了这段代码，但只能使用淡入淡出：

    $('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('fade', function(next) {
            $li.delay(delay).fadeIn(0, next);
        });
        
        $li.dequeue('fade');
        
        delay += 100;
    });
});

是否可以使用切换类来做到这一点？类似这样的东西，但这里的顺序不起作用

$('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('toggle', function(next) {
            $li.delay(delay).toggleClass('appear', next);
        });
        
        $li.dequeue('toggle');
        
        delay += 100;
    });
});

这是 HTML

<div>
<div class="desplegable">Title</div>
<div class="pops">Element 1</div>
<div class="pops">Element 2</div>
<div class="pops">Element 3</div>
</div>

【问题讨论】：

如果您能提供相关的html代码以便我们进行测试，将会有很大帮助。
我用html编辑了这个问题，谢谢和抱歉
您的问题是类更改addClass toggleClass 等不会进入动画队列，因此不受.delay()的影响

标签： jquery queue timeout sequence settimeout

【解决方案1】：

要执行您需要的操作，您可以使用 fadeToggle()，并在集合中的每个 .pops 元素上增加延迟。

这也可以扩展为在连续点击隐藏元素时反转淡入淡出的顺序：

$('.desplegable').click(function() {
  var $pops = $(this).parent().find('.pops').stop();      
  if ($pops.eq(0).is(':visible'))
    $pops = $($pops.get().reverse());
    
  $pops.each((i, el) => $(el).delay(100 * i).fadeToggle(300)); 
});

.pops { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="desplegable">Title</div>
  <div class="pops">Element 1</div>
  <div class="pops">Element 2</div>
  <div class="pops">Element 3</div>
</div>

【讨论】：

fadeToggle 可以解决问题，非常感谢！