问题
I have an accordion widget on my page that expands past where it should stop when animating open (snapping back to the correct size at the end of the animation), and snaps to this same extended-size when it begins to animate closed. In my case, the accordion content should expand to 150px, but I have watched it animate in Chrome's Inspect Element window and seen it go to 185px briefly.
I have seen others suggest that padding and/or margins may be fooling jQuery when it makes a size calculation when changing the accordion section to position: absolute briefly to make the calculation.
http://jsfiddle.net/shadowycore/T5fnZ/1/
Any help at all would be greatly appreciated.
回答1:
I had the same problem and after a few hours I finally managed to fix it by adding the following CSS:
.ui-accordion .ui-accordion-content{
box-sizing:content-box;
-moz-box-sizing:content-box;
}
I hope this helps
回答2:
Overflow:auto is the KEY!! If you check the jquery accordion example you'll notice theirs does not jump and I found that it was down to the overflow:auto style on the .ui-accordion-content class.
So all you should need to do is add the overflow:auto style to the content class.
.ui-accordion .ui-accordion-content{
overflow:auto;
}
回答3:
Set margin:0 and padding:0 on my h3 and ul tags within the accordion, and the jumpiness went away.
回答4:
For me it just ended up being someone set a freaking min-height on the .ui-accordion-content dive soo...
.ui-accordion-content{ min-height: unset; }
worked for me
回答5:
It looks like kind of bug. The same effect is on jqueryui AIP example:
http://api.jqueryui.com/accordion/#entry-examples
回答6:
A simple fix is to enclose the widget in a <div> tag and apply the accordion to that tag instead. Otherwise the accordion action is trying to adjust for the margins and padding, which causes the "jumpiness".
来源：https://stackoverflow.com/questions/14420315/jquery-ui-accordion-jumpy-when-opened