jQuery Accordion: IE animation issues

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?

标签： jquery accordion

16条回答

相关推荐>>

2楼-- · 2019-02-01 22:48

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

0人赞添加讨论(0) 举报

不美不萌又怎样

3楼-- · 2019-02-01 22:49

I'm using JQuery 1.4 and found

<!DOCTYPE html>

is ok for IE6,Chrome too.

0人赞添加讨论(0) 举报

甜甜的少女心

4楼-- · 2019-02-01 22:50

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
}

0人赞添加讨论(0) 举报

走好不送

5楼-- · 2019-02-01 22:52

In options you should set:

 navigation: true

0人赞添加讨论(0) 举报

走好不送

6楼-- · 2019-02-01 22:53

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

0人赞添加讨论(0) 举报

Emotional °昔

7楼-- · 2019-02-01 22:56

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.

0人赞添加讨论(0) 举报

1 2 3 下一页