为什么jQuery UI手风琴打开/关闭动画如此波涛汹涌？

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.

我一直试图想出这个，我只是看不出任何问题 - 同样的手风琴（同样的jqueryui版本1.9.2）在其他网站上没有问题，我甚至切换主题使用和其他网站一样，我仍然对这个网站感到不快。

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

并且它不应该是jquery ui主题，因为它在这里工作得很好

Any ideas what it might be?

任何想法可能是什么？

7 个解决方案

#1

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

问题在于这个css。如果将其更改为px而不是em，则它可以正常运行。

#2

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

对于未来的读者，当我没有在div标签中包含手风琴行的内容时，我也遇到过这个问题：

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>

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

希望这可以帮助！

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

在我的情况下，这是由我的手风琴标题的边缘以及手风琴内容中元素的边缘引起的。您需要将这些元素的边距设置为0.如果要在这些元素之间添加空格，可以使用填充，它不会导致问题。

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

我在手风琴内容的div中使用了段落标签。如果您使用其他内容，请确保该元素的边距设置为0。

#5

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

包括所有依赖项然后它应该工作正常..

#6

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.

我在Drupal中使用Views Nested Accordion构建了一个类似的嵌套手风琴问题。我删除了带有.ui-accordion .ui-accordion-content {height：auto！important;}的views-nested-accordion.css的第38行，它解决了我的问题。

#7

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

平滑动作的关键是“heightStyle”EG

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

#1

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