Question

问题是，当我使用没有任何选项的切换功能，即默认选项时，项目上的'is（'：visible'）'会返回正确的状态。

然而，当我使用切换（“慢”）时，它会显示错误的状态，并始终显示切换操作的项目为可见的假。当然我正在检查回调函数内部，以确保动画完成。

请查看以下代码

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
            jQuery(this).next('div').toggle("slow", "swing", callback);
        });
    });
});

function callback () {
    if (jQuery(this).next('div').is(':visible')) {
        alert('visible--' + jQuery(this).next('div').is(':visible'));
        jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
        jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
}

然而，当不使用“慢”选项进行切换时，同样的效果非常好。

更新2：在这里查看http://jsfiddle.net/tariquasar/7xt7D/2/

任何指针......

更新1：这是小提琴http://jsfiddle.net/tariquasar/7xt7D/

Answer 1

上下文this也未扩展到callback函数。你可以尝试这样做。我更新了jsfiddle (click here)。我会在这里粘贴相同的内容。

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
console.log(this);
            jQuery(this).next('div').toggle("slow","swing",callback(this));
        });
    });
});

function callback (that) {
    setTimeout( function () {
        console.log(jQuery(that).next('div').is(':visible'));
    if (jQuery(that).next('div').is(':visible')) {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
    }, 1000);
}

我添加了SetTimeout来获得您想要的结果。动画完成后调用回调函数。是。但是，在CSS更改为display:none之后。 CSS更改发生在几毫秒之后。

然而，当不使用“慢”选项进行切换时，同样的效果非常好。

我不确定你是如何使用慢

以外的选项

使用'slow'选项切换时功能会中断

1 个答案: