我正在嘗試按順序切換元素的類。我得到了這段代碼，我發現并修改了它，但只有淡入淡出：
$('.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>
uj5u.com熱心網友回復：
要執行您的要求，您可以在集合中的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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338594.html