jquery - jQuery Accordion：IE 动画问题

Question

更新

我将其设为社区 wiki，原因有以下三个：

我不觉得我得到了肯定的答案，但是
我早就不再需要答案了，因为我推出了自己的手风琴功能
这个问题得到了大量的意见，所以显然很多人仍然感兴趣

因此，如果有人想更改/澄清这个问题并使其成为权威指南，请成为我的客人。

我正在使用 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 -->

问题：IE动画很臭

尽管 IE7 可以很好地为文档的示例手风琴菜单设置动画，但我的有问题。具体来说，页面上的一个手风琴式菜单会急速移动并且内容闪烁。 我知道这不是 CSS 问题，因为如果我不包含我的 CSS 文件，也会发生同样的事情。

页面上的另一个手风琴菜单会打开您单击的第一个部分，之后将不会打开任何一个。

这两个问题都是 IE 特有的，如果我使用选项animated: false. 但我想保留默认slide动画，因为它可以帮助用户了解菜单在做什么。

还有其他方法吗？

score 21 · Accepted Answer

我感受到了你的痛苦！我最近经历了一次荒谬的故障排除，我逐块从母版页和页面布局中撕下所有内容（这实际上是在 SharePoint 中），不断缩小页面。

最终结果是没有html 文档的 doc 类型（一些开发人员已将其删除）。缺少 doctype 意味着 IE 7 以 quirks 模式运行，而 JQuery Accordion 发出的内联 CSS 的行为很时髦。

考虑添加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在您的母版页或 html 文档的顶部（如果尚未定义 doctype）。

实际上有一个专门针对 Quirks Mode 行为的网站。您可以在此处查看有关 Quirks Mode的文章。我写了一篇文章，其中包含有关故障排除的更多信息。

score 6 · Accepted Answer

与格式良好的标准 HTML 标记的 IE7 中的所有问题相同。最终奏效的是删除autoHeight: "false"和使用clearStyle: "true".
我还创建了一个 IE < 8 版本的手风琴初始化：

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}

score 5 · Accepted Answer

我实际上已经避免使用手风琴插件，因为我发现它对我的需要有点不灵活。我发现最简单和最灵活的手风琴很简单：

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

对于您的示例，您将像这样使用它：

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"));        
});

您可以将其用作模板并构建 css 类添加、回调和其他有用的东西，但我发现最终这样做比使用手风琴插件要容易得多。

编辑：带有回调函数的示例代码

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 */ });        
});

score 2 · Accepted Answer

Ran into the same issue, but this fixed it for IE 6 and 7:

$().ready(function(){
  $(".ui-accordion-header").click(function() {
    $(this).next().fadeIn();
  });
)};

I think it makes the sliding look nicer anyway...

score 2 · Accepted Answer

我有一个类似的问题，我通过添加这个文档类型来解决它。它适用于 IE 和 FF

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

I'm using JQuery 1.4 and found

<!DOCTYPE html>

is ok for IE6,Chrome too.

于 2010-04-03T07:33:01.110 回答

score 1 · Accepted Answer

我实际上发现了塞巴斯蒂安的对立面——我在内部内容 DIV 上有最小高度，这导致了生涩的动画。我把它们取下来，情况有所改善。但我不确定这如何与 autoheight 交互 - 根据语法，我的设置为“false”，但我的手风琴似乎肯定忽略了这一点......

score 0 · Accepted Answer

0

只需将“autoHeight：false”更改为“autoHeight：true”。

于 2009-03-29T08:36:50.927 回答

score 0 · Accepted Answer

0

在选项中你应该设置：

 navigation: true

于 2008-12-01T22:38:43.213 回答

score 0 · Accepted Answer

我一直在尝试同样的问题，经过一段时间的折腾，我发现如果你的主 div 中包含一个具有相对定位的元素，它将导致 IE 打开手风琴“生涩”。这就是我正在做的...

<div id="accordion">

  <h3 class="oneLine">Asylum</h3>

  <div class="serviceBlockContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue a enim convallis facilisis. Aenean eu ullamcorper nulla. Ut id urna quis augue bibendum commodo et a quam.</p>
  </div>

</div>

我将 H3 元素位置设置为相对，这导致它在 IE 中中断。希望这会有所帮助。

score 0 · Accepted Answer

有类似的问题，我注意到一些人建议查看 doctypes。我刚刚尝试查看实际的 jQuery UI 站点，他们的演示手风琴在 ie6 中工作得很好，这表明我的代码有问题（对我来说更多的侦探工作）。但我也注意到 jquery.UI 站点文档类型很简单<!DOCTYPE html>

score 0 · Accepted Answer

只需更改autoHeight: false为autoHeight: true--> 它对我有用，但不是我想要的......

发现放置min-heightIE7 解决了这个问题。

score 0 · Accepted Answer

我遇到了一个问题，手风琴中我的标题下方的 div，在蓝色页面背景上具有白色背景，其背景颜色消失了。有时当悬停在另一个标题元素上时，它会出现；有时在突出显示文本时，它也会再次出现。这很奇怪，只发生在 IE7 中。

应用缩放：1；在 ui-content div 上仅针对 IE7 修复了此问题。

我希望这对某人有所帮助，因为我花了几个小时试图追查这一点。

score 0 · Accepted Answer

尝试使用这个：

{active: "a.default", alwaysOpen: "true", autoHeight: "false"}

而不是这个：

{active: "a.default", alwaysOpen: true, autoHeight: false}

Explorer 对这种语法有问题。

score 0 · Accepted Answer

我在 IE6 和 IE7 中使用手风琴时遇到了类似的问题，我没有使用手风琴的默认 HTML 结构。奇怪的是，将手风琴元素的水平尺寸固定为一定数量的像素可以解决手风琴动画的问题。为什么？我不知道。但我观察到问题是特定于使用 autoHeight: true 并且问题发生在动画结束时，我假设手风琴元素的高度被重置。我们都知道 IE 不能做数学。

jquery - jQuery Accordion：IE 动画问题

更新

问题：IE动画很臭

16 回答 16

Related

Reference