jQuery手风琴：IE动画问题

Question

jQuery手风琴：IE动画问题

jqueryaccordion

17

更新

我将这个问题设为社区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动画，因为它有助于用户理解菜单正在做什么。

还有其他方法吗？

- Nathan Long

16个回答

6

和所有使用标准HTML语法的IE7用户一样，遇到了同样的问题。最终解决方法是移除autoHeight: "false"并使用clearStyle: "true"。
我也创建了一个适用于IE < 8版本的手风琴初始化：

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

- IanI

5

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

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

- Darko Z

我很佩服你能用如此少的代码编写自己的手风琴。我不太愿意重新编码我现在正在做的事情，只是为了看看是否可以改进动画效果，但我可能会在未来尝试一下这个。 - Nathan Long

1

这就是jQuery的美妙之处！祝你好运。 - Darko

未来已经来临。我想要添加一个开关加号/减号符号到我的标题中以指示它们的状态，所以这些标题需要是<p>标签。结果并不太难。感谢您的建议。 :) - Nathan Long

2

我有类似的问题，通过添加这个文档类型解决了它。在IE和FF中都可以正常工作。

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

- Ben

2

遇到了相同的问题，但这个解决方法适用于IE 6和7：

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

我认为这样做可以让滑动看起来更美观...

- Schulty

1

将您的锚标签更改为SPAN标签。我曾经遇到过同样的问题，这个方法很有效。对于DIV标签也是如此，IE在手风琴中使用这些标签时会出现问题。另外，绝对定位可能会让IE出现问题，请注意。

- Josh

1

我实际上发现了与Sebastien相反的情况 - 我在内部内容DIV上设置了min-height，这导致动画不流畅。我将它们移除后，情况有所改善。但我不确定这如何与autoheight交互 - 根据语法，我的设置为“false”，但我的手风琴明显忽略了它...

- chrisyakimov

1

我正在使用 JQuery 1.4 并发现

<!DOCTYPE html>

对于IE6和Chrome都可以。

- andy

0

尝试使用这个：

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

用这个代替：

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

浏览器有问题处理这种语法。

- Menachem Almog

0

我遇到了一个问题，就是手风琴中标题下面的 div 元素，在蓝色背景上方有一个白色背景，但是它的背景颜色会消失。有时当鼠标悬停在另一个标题元素上时，它会重新出现；有时当高亮文本时，它也会再次出现。这非常奇怪，而且只在 IE7 中发生。

将 zoom:1; 应用于 ui-content div 元素，只针对 IE7 可以解决此问题。

希望这能帮助到某些人，因为我刚刚花了几个小时来追踪这个问题。

- Joe Sepi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tyler · Accepted Answer

我能理解你的痛苦！最近我也遇到了一个非常麻烦的故障排除，我逐个块地将主页面和页面布局从（实际上是在SharePoint中）移除，不断地减少页面大小。

最终结果是没有html文档的doctype（某个开发人员已经删除了它）。缺少doctype意味着IE 7以怪异模式运行，并且由JQuery手风琴发出的内联CSS表现异常。

考虑添加：

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

在您的母版页或HTML文档的顶部（如果没有定义doctype），

实际上有一个专门介绍Quirks模式行为的整个网站。您可以查看有关Quirks模式的文章。我写了一篇文章，其中包含更多相关信息以进行故障排除。