{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 欢心 的问题《jQuery Accordion: IE animation issues》','https://www.manongdao.com/q-270358.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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>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.
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
Try to use this:
instead of this:
Explorer has issues with this kind of syntax.