为什么jQuery UI手风琴打开/关闭动画如此不稳定？

Question

I've been trying to figure this one out and I just can't see any issues - as well, the same accordion (same jqueryui version 1.9.2) works with no issues on another site, I even switched the theme to use the same one as the other site and I still get the choppiness on this one.

And it shouldn't be the jquery ui theme either as it's working fine here

Any ideas what it might be?

Answer 1

For future readers, I have also experienced this issue when I hadn't wrapped the content of my accordion row in a div tag:

Bad:

        <div class="accordion">
            <h3>Delivery Address</h3>
            <table class="address">
                <tr><td>...</td></tr>
            </table>
        </div>

Good:

        <div class="accordion">
            <h3>Delivery Address</h3>
            <div>
                <table class="address">
                    <tr><td>...</td></tr>
                </table>
            </div>
        </div>

Answer 2

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
}

The issue is with this css. If you change it to px instead of em, it functions correctly.

Answer 3

I was having a similar issue. After looking a few different solutions. I found it was a margin issue.

This worked for me:

#accordion .ui-accordion-header {
    margin:0;
}

I have the hightstyle set to content by the way.

Hope this helps!

Answer 4

In my case this was caused by the margin of my accordion titles, and the margin of the elements inside my accordion content. You will need to set the margins of those elements to 0. If you want to add space between those elements you can use padding and it wont cause issues.

#accordion h3 {
margin: 0;
padding: 10px 0;
}
#accordion p {
    margin: 0;
    padding: 10px 0;
}

I used paragraphs tags inside the divs of the accordion content. If you use something else, make sure the margin of that element is set to 0.

Answer 5

The key to the smooth action is the "heightStyle" EG

$( "#accordion" ).accordion({
    heightStyle: "content"
});

Answer 6

I think you have forgotten to add all file dependencies, in tag

<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>

include all dependencies then it should work fine..

Answer 7

I had a similar issue with a nested accordion in Drupal which was built using Views Nested Accordion. I removed line 38 of the views-nested-accordion.css which has .ui-accordion .ui-accordion-content {height: auto !important;} and it fixed my issue.