jQuery slideToggle回调函数和toggle类

jQuery slideToggle callback function and toggleclass

本文关键字：toggle 函数 slideToggle 回调 jQuery      更新时间：2023-09-26

HTML

<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>
<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>
<div class="a">
    <div class="b">CLICK</div>
    <div class="c"></div>
</div>

jQuery

$('.c').hide();
$('.b').click(function(){
    $(this).next('.c').fadeToggle();
    if($('.b').eq(0).is(this)){
    $(this).toggleClass('yellow');
}
});

在线样本

我如何在slideToggle完成后启动toggleclass，就像第一个盒子一样，我希望在音量切换完成后将其变为黄色

您可以使用fadeToggle的回调函数：

工作演示：http://jsfiddle.net/Kqc2B/

$('.b').click(function () {
    var that = this;
    $(this).next('.c').fadeToggle(function() {
        if ( $('.b').eq(0).is(that) ) {
            $(that).toggleClass('yellow');
        }
    });
});

您可以使用fadeToggle提供的完整回调选项，它将在动画完成后被调用

$('.c').hide();
$('.b').click(function(){
    var $this = $(this);
    $this.next('.c').fadeToggle(function(){
        if($('.b').eq(0).is($this)){
            $this.toggleClass('yellow');
        }
    });
});

演示：Fiddle

相关文章：