使用 .animate({'height':'toggle'}) 时出现奇怪的 IE8 问题
查看 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')
})
})
Check out http://wouter.howafarms.com/faq
The goal is to have answers be expanded on click.
As you'll see this works perfectly in all browsers except for ie8.
I've tried various animation effects .slideDown(), .toggle() to no avail. They always work in Firefox, Chrome and even IE7, but never in IE8. What in the heck might be causing it.
Here's the 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')
})
})
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不知道为什么，但 h2 元素上的
display:inline（问题）是折叠在 ie8 中无法正常工作的原因。删除它就可以了。只需要重新调整“q”的样式，使其对齐Im not sure why, but
display:inlineon your h2 element (the question) is why the collapse isn't working right in ie8. remove that and you are fine. just have to restyle the "q" so it lines up刚刚尝试过……是的，有点奇怪……也许 IE8 的高度计算有问题。
也许尝试在切换中使用 SlideDown/slideUp 而不是 .animate({'height': 'toggle'} ？
另外，您可以编写前两行
：
Just tried... yeah it is a bit odd.. maybe IE8's having a stroke with its height calculation.
Maybe try slideDown/slideUp instead of .animate({'height': 'toggle'} in your toggle?
Also, you can write the first two lines:
as