jQuery Accordion:IE动画问题

更新

我将其作为社区维基,原因有三:

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

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


我正在使用jQuery的手风琴UI元素处理页面 。 我在那个例子上模拟了我的HTML,除了在

  • 元素中,我有一些无序的链接列表。 像这样:

      $(document).ready(function() { $(".ui-accordion-container").accordion( {active: "a.default", alwaysOpen: true, autoHeight: false} ); }); 

    问题:IE动画很臭

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

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

    这两个问题都是IE特定的,如果我使用animated: false选项,它们都会消失。 但是我想保留默认的slide动画,因为它可以帮助用户理解菜单正在做什么。

    还有另一种方式吗?

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

    最终结果是没有 html文档的doc类型 (一些开发人员删除了它)。 缺少doctype意味着IE 7以怪癖模式运行,而JQuery Accordion发出的内联CSS表现得很时髦。

    考虑添加:

      

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

    实际上有一个专门用于Quirks Mode行为的整个站点。 您可以在此处查看有关Quirks模式的文章。 我写了一篇post ,其中有关于故障排除的更多周边信息。

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

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

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

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

    进入相同的问题,但这修复了IE 6和7:

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

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

    我有类似的问题,我通过添加此doc类型来解决它。 它适用于IE和FF

      

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

    我正在使用JQuery 1.4并找到了

      

    适用于IE6,Chrome也适用。

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

    在选项中,您应该设置:

      navigation: true 

    只需将’autoHeight:false’更改为’autoHeight:true’即可。

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

    我一直在试验同样的问题,经过一段时间的乱搞,我发现如果你的主div中有一个元素包含相对定位,它将导致IE打开手风琴“生涩”。 这就是我在做什么……

     

    Asylum

    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.

    我将H3元素位置设置为相对,这导致它在IE中中断。 希望这有用。

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

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

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

    试着用这个:

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

    而不是这个:

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

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

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

    只需将autoHeight: false更改为autoHeight: true – >它对我autoHeight: true ,但不是我想要的…

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