使用 .animate({'height':'toggle'}) 时出现奇怪的 IE8 问题答案

【问题标题】：Weird IE8 problem when using .animate({'height':'toggle'})使用 .animate({'height':'toggle'}) 时出现奇怪的 IE8 问题
【发布时间】：2010-09-15 12:24:22
【问题描述】：

查看http://wouter.howafarms.com/faq

目标是在点击时展开答案。
正如您将看到的，这在除 ie8 之外的所有浏览器中都能完美运行。

我尝试了各种动画效果 .slideDown(), .toggle() 无济于事。它们总是在 Firefox、Chrome 甚至 IE7 中工作，但在 IE8 中却不行。到底是什么原因造成的。

这是 JavaScript：

$(document).ready(function() {
$("#faq-list li").addClass('inactive');
$("#faq-list li").first('.inactive').toggleClass('inactive');
$("#faq-list li h2").toggle(
    function(){
        $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300})
        $(this).toggleClass('inactive')
    } ,
    function() {
        $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300})
        $(this).toggleClass('inactive')
    })

})

【问题讨论】：

在 IE8 中，它正确地折叠了所有答案。那就是事情破裂的时候。这个想法是单击问题，它会向下滑动或切换答案。它在其他浏览器中表现出色，但由于某种原因，IE8 显示快速向下，并且从未显示答案。

标签： javascript jquery html internet-explorer-8

【解决方案1】：

我不知道为什么，但你的 h2 元素（问题）上的display:inline 是为什么折叠在 ie8 中无法正常工作。删除它，你就没事了。只需重新设置“q”的样式，使其对齐

【讨论】：

【解决方案2】：

刚试过...是的，这有点奇怪..也许 IE8 的高度计算有问题。

也许尝试在您的切换中使用 slideDown/slideUp 而不是 .animate({'height': 'toggle'}？

另外，你可以写前两行：

$("#faq-list li").addClass('inactive');
$("#faq-list li").first('.inactive').toggleClass('inactive');

作为

$("#faq-list li:not(:first)").addClass('inactive');

【讨论】：

好电话！虽然 slideDown/slideUp 也有同样的问题。