jQuery Accordion：IE 动画问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/332448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Accordion: IE animation issues
提问by Nathan Long
Update
更新
I am making this a community wiki, for three reasons:
我将其作为社区维基，原因有以下三个：
- I don't feel like I got a definitive answer, but
- I have long since stopped needing an answer, because I rolled my own accordion function
- this question gets tons of views, so clearly lots of people are still interested
- 我觉得我没有得到明确的答案，但是
- 我早就不再需要答案了，因为我推出了自己的手风琴功能
- 这个问题得到了大量的意见，所以很明显很多人仍然感兴趣
So if anybody wants to change/clarify this question and make it a definitive guide, be my guest.
因此，如果有人想更改/澄清这个问题并使其成为权威指南，请成为我的客人。
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:
我正在使用 jQuery 的手风琴 UI 元素处理页面。我在该示例上为我的 HTML 建模，除了在<li>元素内部，我有一些无序列表的链接。像这样：
$(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 -->
Problem: IE Animation stinks
问题：IE 动画很臭
Although IE7 animates the documentation's example accordion menu just fine, it has problems with mine. Specifically, one accordion menu on the page moves jerkily and has flashes of content. I know that it's not a CSS issue because the same thing happens if I don't include my CSS files.
虽然 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.
页面上的另一个手风琴菜单会打开您单击的第一部分，然后不会打开任何部分。
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 slideanimation, since it helps the user understand what the menu is doing.
这两个问题都是 IE 特有的，如果我使用选项，它们都会消失animated: false。但我想保留默认slide动画，因为它可以帮助用户了解菜单在做什么。
Is there another way?
还有其他方法吗？
回答by Tyler
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.
我感觉到你的痛苦！我最近经历了一个荒谬的故障排除，我逐块地从母版页和页面布局中删除了所有内容（这实际上是在 SharePoint 中），不断缩小页面。
The end result ended up being not having a doc typefor 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.
最终结果是没有html 文档的 doc 类型（一些开发人员已将其删除）。缺少文档类型意味着 IE 7 以 quirks 模式运行，而 JQuery Accordion 发出的内联 CSS 表现得很古怪。
Consider adding:
考虑添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
At the top of your masterpage or html document (if there's not already a doctype defined).
在您的母版页或 html 文档的顶部（如果尚未定义 doctype）。
There's actually a whole site dedicated to Quirks Mode behavior. You can check out an article about Quirks Mode here. I wrote a postwhich has a little more surrounding information on the troubleshoot.
实际上有一个专门针对 Quirks Mode 行为的站点。您可以在此处查看有关Quirks Mode的文章。我写了一篇文章，其中包含有关故障排除的更多相关信息。
回答by IanI
Same problem as all in IE7 with well formed standard HTML markup. What finally worked was removing autoHeight: "false"and using clearStyle: "true".
I also created an IE < 8 version of the accordion Initialization with:
与 IE7 中所有具有格式良好的标准 HTML 标记的问题相同。最终起作用的是删除autoHeight: "false"和使用clearStyle: "true".
我还创建了一个 IE < 8 版本的手风琴初始化：
if ( $.browser.msie && $.browser.version < 8 ) {
//ie<8 version
}
else {
//version for the good browsers
}
回答by Darko Z
I've actually avoided using the accordion plugin as I found it a little bit inflexible for my needs. I've found that the easiest and most flexible accordion is as simple as:
我实际上避免使用手风琴插件，因为我发现它对于我的需求来说有点不灵活。我发现最简单、最灵活的手风琴很简单：
var accordion = function(toggleEl, accEl) {
toggleEl.click(function() {
accEl.slideToggle(function() { });
return false;
});
}
for your example you would use it like this:
对于您的示例，您将像这样使用它：
$(document).ready(function() {
new accordion($("a.accordion-label"), $("ul. linklist"));
});
you can use this as a template and build in css class adding, callbacks and other useful stuff, but I've found that in the end it was much easier to do it this way than to dick around with the accordion plugin.
您可以将其用作模板并内置 css 类添加、回调和其他有用的东西，但我发现最终以这种方式做到这一点比使用手风琴插件容易得多。
EDIT: Sample code with a callback function
编辑：带有回调函数的示例代码
var accordion = function(toggleEl, accEl, callback) {
toggleEl.click(function() {
accEl.slideToggle(callback);
return false;
});
}
$(document).ready(function() {
new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });
});
回答by Schulty
Ran into the same issue, but this fixed it for IE 6 and 7:
遇到了同样的问题，但这为 IE 6 和 7 修复了它：
$().ready(function(){
$(".ui-accordion-header").click(function() {
$(this).next().fadeIn();
});
)};
I think it makes the sliding look nicer anyway...
我认为无论如何它使滑动看起来更好......
回答by Ben
I have a similar issue, and i fix it by adding this doc type. And it works in both IE and FF
我有一个类似的问题，我通过添加这个文档类型来修复它。它适用于 IE 和 FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
回答by Josh
Change your anchor tags to SPAN tags. I was experiencing the same problem and that worked well. The same goes for DIV tags, IE trips out when those are in the accordion for some reason. Position:Absolute may also freak IE out, fyi
将您的锚标记更改为 SPAN 标记。我遇到了同样的问题，而且效果很好。DIV 标签也是如此，当这些标签出于某种原因在手风琴中时，IE 会跳闸。当前位置：Absolute 也可能吓坏 IE，仅供参考
回答by andy
I'm using JQuery 1.4 and found
我正在使用 JQuery 1.4 并发现
<!DOCTYPE html>
is ok for IE6,Chrome too.
IE6、Chrome 也可以。
回答by chrisyakimov
I actually found the opposit of sebastien - I had min-heights on the internal content DIVs which were causing the jerky animation. I took them off and things improved. But I'm not sure how this interacts with autoheight - according to the syntax, mine is set to "false", but my accordion definitely seems to be ignoring that...
我实际上找到了 sebastien 的对立面 - 我在导致生涩动画的内部内容 DIV 上设置了最小高度。我把它们取下来，情况有所改善。但我不确定这如何与 autoheight 相互作用 - 根据语法，我的设置为“false”，但我的手风琴似乎确实忽略了这一点......
回答by Aaron
I had a similar problem with an accordion in IE6 and IE7 where I was not using the default HTML structure for the accordion. Strangely enough, fixing the horizontal size of the accordion elements to a certain number of pixels cleared up the problems with the accordion animation. Why? I don't know. But I observed that the problems were specific to using autoHeight: true and the problems occurred at the end of the animation where I assume the height of the accordion elements is reset. And we all know IE cannot do math.
我在 IE6 和 IE7 中的手风琴遇到了类似的问题，我没有使用手风琴的默认 HTML 结构。奇怪的是，将手风琴元素的水平尺寸固定为一定数量的像素清除了手风琴动画的问题。为什么？我不知道。但我观察到问题是特定于使用 autoHeight: true 的，并且问题发生在动画结束时，我假设手风琴元素的高度被重置。我们都知道 IE 不会做数学。
回答by Aaron
Just change 'autoHeight: false' to 'autoHeight: true'.
只需将 'autoHeight: false' 更改为 'autoHeight: true'。
