jQuery手风琴:IE动画问题 [英] jQuery Accordion: IE animation issues
问题描述
出于以下三个原因，我将其设为社区Wiki:
I am making this a community wiki, for three reasons:
- 我不觉得自己有明确的答案，但是
- 很久以来我不再需要答案了，因为我滚动了自己的手风琴功能
- 这个问题得到了无数的见解，所以显然很多人仍然感兴趣
因此，如果有人想更改/澄清此问题并将其作为最终指南，请成为我的客人.
So if anybody wants to change/clarify this question and make it a definitive guide, be my guest.
我正在使用jQuery的手风琴UI元素创建页面.我在该示例上对HTML进行了建模，除了在<li>元素内，我有一些无序的链接列表.像这样:
I'm working on a page using jQuery's accordion UI element. I modeled my HTML on that example, except that inside the <li> elements, I have some unordered lists of links. Like this:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
问题:IE动画发臭
尽管IE7可以很好地使文档的示例手风琴菜单带有动画效果，但我的问题仍然存在.具体而言，页面上的一个手风琴菜单会抖动，并闪烁着内容. 我知道这不是CSS问题，因为如果我不包括CSS文件，也会发生同样的事情.
页面上的其他手风琴菜单会打开您单击的第一部分，此后，将不会打开其中的任何一个.
The other accordion menu on the page opens the first section you click and, after that, won't open any of them.
这两个问题都是特定于IE的，如果使用选项animated: false，则两个问题都将消失.但是我想保留默认的slide动画，因为它可以帮助用户了解菜单的功能.
Both of these problems are IE-specific, and both go away if I use the option animated: false. But I'd like to keep the default slide animation, since it helps the user understand what the menu is doing.
还有另一种方法吗?
推荐答案
我感到您很痛苦！我最近经历了一个荒谬的故障排除，其中我将所有内容逐块地从母版页和页面布局中删除(这实际上是在SharePoint中)，从而不断精简页面.
I feel your pain! I recently went through a ridiculous troubleshoot where I tore everything out of the master page and page layout block by block (this was actually in SharePoint), continuously slimming down the page.
最终结果是没有html文档的文档类型(某些开发人员已将其删除).缺少doctype意味着IE 7以怪癖模式运行，而JQuery Accordion发出的内联CSS表现得很时髦.
The end result ended up being not having a doc type for the html document (some developer had removed it). The lack of a doctype meant that IE 7 was running in quirks mode and the inline CSS emitted by the JQuery Accordion was behaving funky.
考虑添加:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在母版页或html文档的顶部(如果尚未定义doctype).
At the top of your masterpage or html document (if there's not already a doctype defined).
实际上，有一个专门针对怪癖模式"行为的网站.您可以在此处查看有关 Quirks Mode的文章.我写了一篇帖子，其中包含有关该主题的更多信息解决问题.
There's actually a whole site dedicated to Quirks Mode behavior. You can check out an article about Quirks Mode here. I wrote a post which has a little more surrounding information on the troubleshoot.
这篇关于jQuery手风琴:IE动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
