jQuery Accordion:IE 动画问题

发布于 2024-07-10 03:29:45 字数 1362 浏览 10 评论 0原文

更新

我将其设为社区维基,出于三个原因:

  • 我不觉得我得到了明确的答案,但
  • 我早已不再需要答案,因为我推出了自己的手风琴功能,
  • 这个问题得到了大量的观点,所以显然很多人仍然感兴趣,

所以如果有人想改变/澄清这个问题并使其成为一个明确的指南,请成为我的客人。


我正在使用 jQuery 的 accordion UI 元素 开发一个页面。 我根据该示例对 HTML 进行了建模,但在

  • 元素内,我有一些无序列表的链接。 像这样:
  •   $(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 选项,这两个问题都会消失。 但我想保留默认的幻灯片动画,因为它可以帮助用户了解菜单的用途。

    还有别的办法吗?

    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:

      $(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

    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.

    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 slide animation, since it helps the user understand what the menu is doing.

    Is there another way?

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(16

    南街女流氓 2024-07-17 03:29:46

    遇到了同样的问题,但这解决了 IE 6 和 7 的问题:

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

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

    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...

    感情废物 2024-07-17 03:29:46

    我有类似的问题,我通过添加此文档类型来修复它。 并且它在 IE 和 FF 中都有效

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

    I have a similar issue, and i fix it by adding this doc type. And it works in both IE and FF

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    
    一城柳絮吹成雪 2024-07-17 03:29:46

    将锚标记更改为 SPAN 标记。 我遇到了同样的问题并且效果很好。 DIV 标签也是如此,当这些标签由于某种原因位于手风琴中时,IE 会跳出。 位置:Absolute 也可能吓坏 IE,仅供参考

    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

    独闯女儿国 2024-07-17 03:29:46

    我正在使用 JQuery 1.4,发现

    <!DOCTYPE html>
    

    IE6、Chrome 也可以。

    I'm using JQuery 1.4 and found

    <!DOCTYPE html>
    

    is ok for IE6,Chrome too.

    三生一梦 2024-07-17 03:29:46

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

    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...

    烧了回忆取暖 2024-07-17 03:29:46

    在选项中你应该设置:

     navigation: true
    

    In options you should set:

     navigation: true
    
    那请放手 2024-07-17 03:29:46

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

    Just change 'autoHeight: false' to 'autoHeight: true'.

    久隐师 2024-07-17 03:29:46

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

    Having similar issues, and I notice a few people suggesting looking at doctypes.
    I just tried viewing the actual jQuery UI site and their demo accordion work just fine in ie6, suggesting it is a problem with my code (more detective work for me). But I also notice that the jquery.UI sites doctype is simply <!DOCTYPE html>

    靑春怀旧 2024-07-17 03:29:46

    我一直在尝试同样的问题,经过一段时间的混乱,我发现如果你的主 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 中崩溃。 希望这有帮助。

    I've been experimenting the same issue and after a while of messing around I found that if you have an element contained inside your main div with relative positioning, it will cause IE to open the accordion "jerky". Here's what I was doing...

    <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>
    

    I had the H3 element position set to relative and that caused it to break in IE. Hope this is helpful.

    暗藏城府 2024-07-17 03:29:46

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

    应用缩放:1; 仅针对 ui-content div 上的 IE7 修复了此问题。

    我希望这对某人有帮助,因为我刚刚花了几个小时试图找出这个问题。

    I was having a problem where the div below my header in the accordion, which had a white background over a blue page background, had its background-color disappearing. Sometimes when hovering over another header element, it would show up; sometimes when highlighting text, it would show up again too. It was very strange and ONLY HAPPENING IN IE7.

    Applying zoom:1; targeting only IE7 on the ui-content div fixed this.

    I hope that helps someone because I just spent several hours trying to track this down.

    零時差 2024-07-17 03:29:46

    尝试使用这个:

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

    而不是这个:

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

    资源管理器对这种语法有问题。

    Try to use this:

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

    instead of this:

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

    Explorer has issues with this kind of syntax.

    不寐倦长更 2024-07-17 03:29:46

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

    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.

    请持续率性 2024-07-17 03:29:46

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

    发现为 IE7 添加 min-height 解决了问题。

    Just change autoHeight: false to autoHeight: true --> it worked for me, but wasn't what I want...

    Find that putting min-height for IE7 solved the problem.

    猫卆 2024-07-17 03:29:45

    我感受到你的痛苦! 我最近经历了一次荒谬的故障排除,我将母版页和页面布局中的所有内容逐块删除(这实际上是在 SharePoint 中),不断缩小页面。

    最终结果是 html 文档没有文档类型(某些开发人员已将其删除)。 缺乏文档类型意味着 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 文档的顶部(如果尚未定义文档类型)。

    实际上有一个专门讨论怪癖模式行为的网站。 您可以在此处查看有关 Quirks 模式的文章。 我写了一篇文章,其中有更多关于排除故障。

    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.

    The end result ended up being not having a doc type for 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.

    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).

    There's actually a whole site dedicated to Quirks Mode behavior. You can check out an article about Quirks Mode here. I wrote a post which has a little more surrounding information on the troubleshoot.

    醉殇 2024-07-17 03:29:45

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

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

    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:

    if ( $.browser.msie && $.browser.version < 8 ) {
        //ie<8 version
    }
    else {
        //version for the good browsers
    }
    
    万劫不复 2024-07-17 03:29:45

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

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

    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.

    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 */ });        
    });
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文