jquery：切换和css显示状态

Question

我有一个 div，它使用 jquery 的“快速”切换方法隐藏/显示。切换发生后，我立即记录切换的 div 的 css 显示状态，如果它从显示变为隐藏，则状态显示为“块”...

但根据 jquery 文档，它现在应该是“无”：

当提供持续时间时， .toggle() 成为动画方法。 .toggle() 方法同时为匹配元素的宽度、高度和不透明度设置动画。当这些属性在隐藏动画后达到 0 时，将 display style 属性设置为 none，以确保该元素不再影响页面的布局。

$(this).parents('#accordionContainer').find('div.accordionContent').toggle('fast');
    console.log($(this).parents('#accordionContainer').find('div.accordionContent').css('display'));

我的控制台日志输出：

阻止

jquery....min.js（第 162 行）

编辑：只是在这里大声思考，但想知道我是否需要在切换和显示检查之间设置一个 setTimeout，可能是 1 秒左右？更好的是，切换是否返回 isFinished 消息或类似的东西？

Answer 1

“紧接着”调用切换，该方法正在异步动画。由于它正在调整宽度和高度来执行动画，因此必须将 CSS 声明为 display:block。动画完成后，CSS 应该会像您预期的那样显示：无。

您可以在动画完成后通过向 toggle() 函数提供回调参数来调用一段代码。例如：

$(this).parents('#accordionContainer').find('div.accordionContent').toggle('fast', 
    function() {
        // This is called when the toggle animation is complete
        console.log( $(this).parents('#accordionContainer').find('div.accordionContent').css('display'));
    }
);

在 JSFiddle 中：http://jsfiddle.net/Ggfe4