Question

更新

我将此作为社区维基，原因有三：

我不觉得我得到了明确的答案，但是
我早就停止了需要答案，因为我推出了自己的手风琴功能
这个问题得到了很多观点，很明显很多人仍然感兴趣

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

我正在使用jQuery的accordion UI element处理页面。我在该示例上对我的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动画，因为它可以帮助用户了解菜单正在做什么。

还有其他办法吗？

Answer 1

我感觉到你的痛苦！我最近经历了一个荒谬的故障排除，我在主页和页面布局中逐块删除了所有内容（这实际上是在SharePoint中），不断减少页面。

最终结果是html文档没有文档类型（某些开发人员删除了它）。缺少doctype意味着IE 7以怪癖模式运行，而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 here的文章。我wrote a post有更多关于故障排除的周围信息。

Answer 2

与IE7中的所有问题一样，具有格式良好的标准HTML标记。最终有效的方法是删除autoHeight: "false"并使用clearStyle: "true" 我还创建了一个IE＆lt; 8版手风琴初始化：

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

Answer 3

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

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

Answer 4

遇到同样的问题，但这为IE 6和7修复了它：

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

我认为无论如何它都会使滑动看起来更好......

Answer 5

我有类似的问题，我通过添加此doc类型来修复它。它适用于IE和FF

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

Answer 6

将锚标记更改为SPAN标记。我遇到了同样的问题，效果很好。对于DIV标签也是如此，当出于某种原因在手风琴中出现时，IE会跳出来。位置：绝对可能也会让IE出局，fyi

Answer 7

我正在使用JQuery 1.4并找到了

<!DOCTYPE html>

也适用于IE6，Chrome也是如此。

Answer 8

我实际上找到了塞巴斯蒂安的对立面 - 我对内部内容DIV产生了最小高度，这导致了生涩的动画。我把它们拿走了，事情有所改善。但是我不确定它是如何与自动高度相互作用的 - 根据语法，我的设置为“假”，但我的手风琴肯定似乎忽略了......

Answer 9

在选项中，您应该设置：

 navigation: true

Answer 10

只需将'autoHeight：false'更改为'autoHeight：true'。

Answer 11

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

Answer 12

我一直在试验同样的问题，经过一段时间的乱搞我发现如果你的主要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中中断。希望这有用。

Answer 13

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

应用缩放：1;仅针对ui-content div上的IE7进行了定位。

我希望能帮助某人，因为我花了几个小时试图追踪这一点。

Answer 14

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

发现为IE7放置min-height解决了这个问题。

Answer 15

尝试使用它：

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

而不是：

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

资源管理器存在这种语法问题。

Answer 16

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

jQuery Accordion：IE动画问题

更新

问题：IE动画很臭

16 个答案: